CSS两个具有100％高度的嵌套DIV不起作用答案

【问题标题】：CSS two nested DIVs with both 100% height don't workCSS两个具有100％高度的嵌套DIV不起作用
【发布时间】：2012-01-14 04:05:59
【问题描述】：

我有两个嵌套的DIV，外部 div (div#wrapper) 有一个 height 的 100% 可以正常工作，但在 div#main 里面有一个 div 应该是 @987654327 @ 但事实并非如此。如果我将div#main 更改为position:absolute，那么它就是100%，但是该块不再在包装器中并从底部出来。你能帮我吗...

html, body{
background-image:url(images/bg.png);
height:100%;
margin:0px;
padding:0px;
}

div#header{
background:-moz-linear-gradient(top, #e5e5e5, #b5b5b5); /* Firefox */
background:-webkit-linear-gradient(top, #e5e5e5, #b5b5b5); /* Safari, Chrome */
background:-o-linear-gradient(top, #e5e5e5, #b5b5b5); /* Opera */
background:-ms-linear-gradient(top, #e5e5e5, #b5b5b5); /* IE */
background:linear-gradient(top, #e5e5e5, #b5b5b5); /* W3C Standard */
border-bottom: 1px solid #000000;
height:50px;
position:fixed;
width:100%;
}

div#logo{
border: 1px solid #ff0000;

background-image:url(images/logo.png);
background-repeat:no-repeat;
height:50px;
margin:0 auto;
position:relative;
width:900px;
}

div#wrapper{
border: 1px solid #00ff00;

height:auto !important;
height:100%;
margin:0 auto;
min-height:100%;
position:static;
width:900px;
}

div#main{
border: 1px solid #00ffff;
position:static;
height:100%;
height:auto !important;
min-height:100%;
margin-top:75px;
}

<div id="header">
<div id="logo"></div>
</div>

<div id="wrapper">
<div id="main"></div>
</div>

【问题讨论】：

您不能同时将div 的高度设置为auto 和其他东西！ !important 覆盖其他任何内容，您的 min-height 与 height 的值相同，因此它是多余且无用的。你这样做了很多次。

标签： css html nested height

【解决方案1】：

div#main{
border: 1px solid #00ffff;
position:static;
height:100%;
height:auto !important;   <-- Get rid of this.
min-height:100%;
margin-top:75px; <-- Get rid of this.
}

【讨论】：

一般来说，如果您使用“！important”，就会出现问题。如果您知道为什么要使用 !important，那么是时候重构您的 CSS 了。

【解决方案2】：

您的div#main 没有height 或100%。

它的高度为100% + 2px 边框加上 75px margin。

也许这可能是你的问题。

【讨论】：

【解决方案3】：

不管你是不是这个意思。

html, body{
background-image:url(images/bg.png);
height:100%;
margin:0px;
padding:0px;
}

div#header{
background:-moz-linear-gradient(top, #e5e5e5, #b5b5b5); /* Firefox */
background:-webkit-linear-gradient(top, #e5e5e5, #b5b5b5); /* Safari, Chrome */
background:-o-linear-gradient(top, #e5e5e5, #b5b5b5); /* Opera */
background:-ms-linear-gradient(top, #e5e5e5, #b5b5b5); /* IE */
background:linear-gradient(top, #e5e5e5, #b5b5b5); /* W3C Standard */
border-bottom: 1px solid #000000;
width:100%;
}

div#logo{
background-image:url(images/logo.png);
background-repeat:no-repeat;
margin:0 auto;
position:relative;
width:900px;
}

div#wrapper{
border: 1px solid blue;
margin:0 auto;
width:900px;
}

div#main{
border: 1px solid #00ffff;
height:100%;
}
<div id="header">header
<div id="logo">logo</div>
</div>

<div id="wrapper">wrapper
<div id="main">main</div>
</div>

【讨论】：

【解决方案4】：

试试这个，使用 z-index 将你的标题放在包装器的顶部

html, body{
background-image:url(images/bg.png);
height:100%;
margin:0px;
padding:0px;
}

div#header{
background:-moz-linear-gradient(top, #e5e5e5, #b5b5b5); /* Firefox */
background:-webkit-linear-gradient(top, #e5e5e5, #b5b5b5); /* Safari, Chrome */
background:-o-linear-gradient(top, #e5e5e5, #b5b5b5); /* Opera */
background:-ms-linear-gradient(top, #e5e5e5, #b5b5b5); /* IE */
background:linear-gradient(top, #e5e5e5, #b5b5b5); /* W3C Standard */
border-bottom: 1px solid #000000;
height:50px;
position:fixed;
width:100%;
}

div#logo{
border: 1px solid #ff0000;
background-image:url(images/logo.png);
background-repeat:no-repeat;
height:50px;
margin:0 auto;
position:relative;
width:900px;
}

div#wrapper{
border: 1px solid #00ff00;

height:100%;
margin:0 auto;
position:relative;
top:50px;
width:900px;
}

div#main{
border: 1px solid #00ffff;
height:100%;
height:auto !important;
min-height:100%;
}

【讨论】：

他不是在问如何把它放在上面……他想知道如何让它达到 100% 的高度。
然后去掉top:50px;并添加 margin-top:50px;在 div#main -__-' 上！
您在div#main 中没有发现问题？ height:100%; height:auto !important; min-height:100%;