CSS两次与100％的高度都嵌套的DIV不工作

我有两个嵌套DIV的，外层的div（div#wrapper）具有100%工作正常，但里面有一个div#main其中div应的height100%但事实并非如此。如果我将div#main更改为position:absolute，那么它是100%，但该块不再包装在包装中，而是放在底部。你能不能帮我请...CSS两次与100％的高度都嵌套的DIV不工作

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>

来源

2012-01-13 user1032465

您不能在同一时间将'div'的高度设置为'auto'！ '！''重载其他任何东西，你的'最小高度'和'高度'的值相同，所以它是多余的和无用的。你正在多次这样做。 – Sparky 2012-01-13 19:05:19

你div#main没有的100%height。

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

也许这可能是你的问题。

来源

2012-01-13 18:40:56

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

来源

2012-01-13 18:42:50

一般来说，如果您使用“！important”，那么出现问题。如果你知道你为什么使用！重要的是，现在是时候重新考虑你的CSS。 – 2012-01-13 19:04:52

-1

试试这个，使用的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%; 
}

来源

2012-01-13 18:53:40

他不是在问怎么把它放在最上面......他想知道如何把它放到100％的高度。 – Sparky 2012-01-13 19:02:05

然后删除顶部：50px;并添加margin-top：50px;在div＃main -__-'上！ – 2012-01-13 19:08:30

您在'div＃main'中看不到问题？ '身高：100％; 身高：自动！重要; 分钟高度：100％;' – Sparky 2012-01-13 19:11:43

的顶部你的头你的意思是这个与否。

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>

来源

2012-01-13 19:21:35

CSS两次与100％的高度都嵌套的DIV不工作

回答

相关问题