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