您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設計教程 >> 移動前端 >> 瀏覽設計教程

Div中height:100%無效的解決辦法

有時我們在設置DIV高度的時候,會用到一個height:100%的大小,來讓div撐滿瀏覽器高度。但是我們會發(fā)現(xiàn),直接在div中寫上“style:"height:100%;"”是無效的。

那么如何才能讓div的css height:100%生效呢?解決辦法很簡單,同時也能適配多個瀏覽器。

方法就是在css當中增加上:

html, body{ margin:0; height:100%; }

這樣,在div中使用height:100%就能夠正常顯示了。

示例代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖趣網(wǎng)[Tuquu]</title>
<style>
html,body{ margin:0px; height:100%;} 
.container { height: 100%;}
.c2{ width:100%; background:#09F; font-size:36px;}
</style>
</head>

<body>
<div class="container c2" >圖趣網(wǎng) www.tuquu.com</div>
</body>
</html>

效果如下:

[教程作者:admin]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.pkvc.cn/tutorial/wd1984.html
10款優(yōu)秀的CSS代碼格式化工具
srcset屬性獲chrome 34支持
圖趣網(wǎng)微信
建議反饋
×