CSS два вложенных DIV с высотой 100% не работают

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

Вы имеете в виду это или нет.

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 3

Попробуйте, используйте 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%;
}

Answer 4

Ваш div#main не имеет height из 100%.

Он имеет высоту 100% + граница 2 пикселя плюс 75 пикселей margin.

Возможно, этоваша проблема.