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