當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

div高度、宽度100% div width、height 100%

發(fā)布時間：2024/10/12 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 div高度、宽度100% div width、height 100% 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

正像你所知道的那樣，設(shè)置DIV大小的有兩個屬性width和height，以前在學(xué)習(xí)DIV每次給DIV設(shè)置100%寬度或高度時都很迷惑，不明確這個100%的寬度（高度）到底有多寬有多高？這個100%是從哪里得到的從哪里繼承的？今天我們的話題就是有關(guān)div高度100%的問題！

其實，要弄懂div寬度|width100%、div高度|height100%到底是怎么實現(xiàn)的，只需弄懂一個簡單的問題就可以了，即100%的基數(shù)是誰，就是這個100%是相對于誰的width、height來說是100%？

div的100%是從其上一級div的寬高繼承來的，有一點很關(guān)鍵，就是要設(shè)置div100%顯示，必須設(shè)置其上一級div的寬度或高度，否則無效。舉例說明：父div(deman)寬300高200，子div(cc)如果在這個條件下設(shè)置divcc的寬高都為100%的話，那cc的確切大小就是父div的大小(寬300高200)，在嘗試中你會發(fā)現(xiàn)，div顯示會受自身和其上一級div的padding和margin影響，而其實際寬高不受影響。值得玩味噢！

有朋友問如何讓div的高度為100%撐滿屏.以前用table來布局的時候會用到table高度100%然后再在這個table里插一個table垂直居中.這樣的頁面可以讓它在不同分辨率下都在顯示器中間.用div則比較麻煩了你設(shè)置div的高度為100%在瀏覽器里仍然看它扁的可憐.

呵呵~

應(yīng)該怎么解決呢?

你設(shè)div的高度為100%,那么它是和什么地方相對為100%?

前面總得有個容器說明他的高度是多少。這樣的話div才能按比例100%繼承上一級的高度可惜的是瀏覽器一般默認解釋為內(nèi)容的高度，而不是100%只要為html和body設(shè)置高度為100%就可以了html,body{height:100%;}這樣之后div會按比例來繼承上一級的高度了.僅僅設(shè)置的DIV元素的height屬性貌似沒有什么效果。

同時，讓人高興的是，這樣設(shè)置的css樣式不存在瀏覽器兼容問題，在IE5.5、IE6、IE7、IE8還有火狐均可正常顯示。

下面以實例說明div100%的問題：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>DivHeight100%_Test</title>

<styletype="text/css">

<!--

html,body{

margin:0px;

height:100%;

}

#deman{

height:100%;

background-color:#CCF;

}

.cc{

background-color:#9C9;

height:auto;

}

-->

</style>

</head>

<body>

<divid="deman">

<divclass="cc">DivHeight100%_Test</div>

</div>

</body>

</html>

轉(zhuǎn)載于:https://www.cnblogs.com/chenjianhong/archive/2012/07/19/4145042.html

總結(jié)

以上是生活随笔為你收集整理的div高度、宽度100% div width、height 100%的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。