Question

我有两个嵌套的DIV，外部div（div#wrapper）的height 100%工作正常，但有一个div } div#main里面应该是100%，但事实并非如此。如果我将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>

Answer 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.
}

Answer 2

div#main height没有100%。

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

也许这可能是你的问题。

Answer 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>

Answer 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%;
}

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

4 个答案: