css中div盒子height:100%高度無效解決辦法
我要評論需要分成2種情況來看待
一、flex布局情況下
1、在父元素設置一個固定px高度例如height: 500px
2、在子元素設置height: auto
那么為什么height: 100%不生效呢？
原因是flex布局也是自適應的，他的單位默認是auto和百分比無法計算得出一個合理值，因此高度設置height: 100%失效了。
'auto' * 100/100 = NaN
二、非flex布局情況下
對于height屬性，如果父元素height為auto，只要子元素在文檔流中（即position不等于fixed或者absolute），其百分比值完全就被忽略了。這是什么意思呢？首先來看個例子，比如，某小白想要在頁面插入一個div標簽，希望滿屏顯示黑色背景，就寫了如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>黑色主題</title>
<style>
.box {
width: 100%; // 這是多余的
height: 100%; // 這是無效的
background: #000;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>然后他發(fā)現(xiàn)這個div高度永遠是 0，哪怕其父級body塞滿了內容也是如此。事實上，他需要加上這樣的設置才行：
html, body {
height: 100%;
}并且僅僅設置body沒有設置html也是不行的，因為此時的body也沒有具體的高度值：
body {
/* 子元素 height:100%依舊無效 */
}只要經過一定的實踐，我們都會發(fā)現(xiàn)對于普通文檔流中的元素，百分比高度值要想起作用，其父級必須有一個可以生效的高度值！但是，怕是很少有人思考過這樣一個問題：為何父級沒有具體高度值的時候，height:100%會無效？
真實的原因是：如果包含塊（即父元素）的高度沒有顯式指定（即高度由內容決定），并且該元素不是絕對定位，則計算值為auto（這是計算值，是指渲染之后解釋的值，并不是我們設置height: auto所指的值）。一句話總結就是：因為解釋成了 auto。要知道，auto 和百分比計算，肯定是算不了的：
'auto' * 100/100 = NaN
此時，他們的計算結果是NaN,這就是父元素沒有設置高度時，子元素高度百分比不生效的原因了。
到此這篇關于css中div盒子height:100%高度無效解決辦法的文章就介紹到這了,更多相關css height:100%高度無效內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
CSS中height:100vh和height:100%的區(qū)別
本文主要介紹了CSS中height:100vh和height:100%的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2023-04-06
這篇文章主要介紹了為什么你寫的height:100%不起作用？這個知識不算冷門的，但是用的時候可能還是會有些懵逼，下面小編就詳細介紹一下2021-05-10
CSS設置盒子容器(div)高度(height)始終為100%
這篇文章主要介紹了CSS設置盒子容器(div)高度(height)始終為100%,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小2020-07-14深入理解CSS的height:100%和height:inherit之間的使用區(qū)別
這篇文章主要介紹了深入理解CSS的height:100%和height:inherit之間的使用區(qū)別,作者給出了頁面設計時的實際示例對比,需要的朋友可以參考下2015-06-08