Div中height:100%無(wú)效的解決辦法

2014/4/29 9:09:58來(lái)源：西部e數(shù)碼

有時(shí)我們?cè)谠O(shè)置DIV高度的時(shí)候，會(huì)用到一個(gè)height:100%的大小，來(lái)讓div撐滿瀏覽器高度。但是我們會(huì)發(fā)現(xiàn)，直接在div中寫(xiě)上“style:"height:100%;"”是無(wú)效的。

那么如何才能讓div的css height:100%生效呢？解決辦法很簡(jiǎn)單，同時(shí)也能適配多個(gè)瀏覽器。

方法就是在css當(dāng)中增加上：

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]

關(guān)鍵詞：div css height：100% 100% 高度100% 前端代碼

免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請(qǐng)注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途！
本文地址：http://m.likemindfilms.com/tutorial/wd1984.html

上一篇:10款優(yōu)秀的CSS代碼格式化工具

下一篇:srcset屬性獲chrome 34支持

您可能還喜歡

這些是最新的

最熱門(mén)的教程

Div中height:100%無(wú)效的解決辦法

您可能還喜歡

網(wǎng)頁(yè)教程分類(lèi)