嵌套div的最小页面高度

问题描述：

我想让2个嵌套页面容器div的页面高度最小。我能够用单个页面容器找到这个code，但是如果我添加另一个外部容器，逻辑就会分崩离析。嵌套div的最小页面高度

这里是html和css。（我想蓝色和红色div的是相同的高度。如果<div id='outer'>被删除，红色是我想要的。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title>CSS Layout - 100% height</title> 
    <style> 

* 
{ 
    margin:0; 
    padding:0; 
    border:0; 
} 

html,body 
{ 
    height:100%; 
    background:gray; 
} 

div#container 
{ 
    position:relative; 
    margin:0 auto; 
    width:750px; 
    background:red; 

    height:auto !important; 
    height:100%; 
    min-height:100%; 
} 

div#outer 
{ 
    position:relative; 
    margin:0 auto; 
    width:800px; 
    background:blue; 

    height:auto !important; 
    height:100%; 
    min-height:100%; 
} 

div#header 
{ 
    background:#ddd 
} 

div#footer 
{ 
    position:absolute; 
    width:100%; 
    bottom:0; 
    background:#ddd; 
} 

    </style> 
</head> 
<body> 
    <div id="outer"> 
     <div id="container"> 
      <div id="header"> 
       <p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p> 
      </div> 

      <div id="content"> 
       <p> 
        Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. Testing text goes here. 
       </p> 

      </div> 

      <div id="footer"> 
       <p> 
        This footer is absolutely positioned to bottom:0; of #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport. 
       </p> 
      </div> 
     </div> 
    </div> 



</body>

在搜索结果，看来这可能不因为height:100%和min-height:100%只能在正文后的第一个元素上工作。有关如何做到这一点的任何建议？浮动div的？

答

min-height不适用于嵌套的div。

答

你不能在同一顺序使用

height:auto !important; 
height:100%; 
min-height:100%;

一下子你可以使用：

height: auto !important; 
height:100%;

或者你可以使用：

min-height:100%; 
height:auto;

最小高度应该在Height属性之前来。希望这可以解决这个问题。

我尝试了你的两个建议，但都没有成功。 – JoeFletch 2012-01-30 11:41:40

嵌套div的最小页面高度

相关推荐