将高度设置为100时Div缩放至内容

我有三个嵌套div，内部有一个固定高度，中间一个用于填充外部填充，外部填充外部填充，另一个填充内部填充底部页脚。但中间部分似乎只与内部一样高，这是我不想要的。将高度设置为100时Div缩放至内容

我将问题简化为以下内容，我认为这只是一个简单的例子。我不想更改外部或内部div的高度属性，因为这会干扰布局的其余部分。有没有办法通过改变中间div的属性来做我想要的？

这里的HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 
<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="style.css" /> 
    </head> 

    <body> 
     <div id="outer"> 
      <div id="middle"> 
       <div id="inner"></div> 
      </div> 
     </div> 
    </body> 
</html>

而CSS：

html{height:100%;} 
body{height:100%;} 
#outer{height: auto; min-height: 100%;} 
#middle{height: 100%;} 
#inner{height:500px;}

您可以检查#middle DIV得到高度500，而我希望它填补了#outer股利。

我是一个CSS的新手，几乎所有的代码都是从不同的教程和/或试验和错误复制。所以请原谅我是否做了明显错误/愚蠢的事情。

编辑：我不明白为什么，但似乎取消了doctype声明使问题消失。因此，我更改了代码示例以包含声明。

来源

2013-03-20 ronno

你尝试使用Firebug查看适用的CSS到那个div？ – 2013-03-20 17:52:19

@IvayloStrandjev我试过使用检查元素。它说适用于它的唯一样式是'height：100％;' – ronno 2013-03-20 18:03:04

你的错误是将'body'和'html'类放到高度：100％（它什么都不做）。相反，我把你的外部股利100％的高度。

<html> 
<head> 
<style type="text/css"> 
div {border:2px solid black;} 
div div {border-color: blue;} 
div div div {border-color: red;} 
#outer{height: 100%; min-height: 100%;} 
#middle{height: 100%;} 
#inner{height:500px;} 
</style> 
</head> 

<body> 
    <div id="outer"> 
     <div id="middle"> 
      <div id="inner"></div> 
     </div> 
    </div> 
</body> 
</html>

如果你不能工作了如何获得在混合页脚，我已经给你太多的例子：

<html> 
    <head> 
<style type="text/css"> 
div {border:2px solid black;} 
div div {border-color: blue;} 
div div div {border-color: red;} 
#outer{height: 100%; min-height: 100%; position: relative;} 
#middle{height: 100%;} 
#inner{height:500px;} 
#footer{height:100px;width:100%;position:absolute;bottom:0;} 
</style> 
    </head> 

    <body> 
     <div id="outer"> 
      <div id="middle"> 
       <div id="inner"></div> 
      </div> 
      <div id="footer">This is the footer</div> 
     </div> 
    </body> 
</html>

来源

2013-03-20 18:04:28 Ozzy

现在这超出了我对html/CSS的理解。你的文件和我的文件之间唯一的区别就是我的html在顶部有一个doctype声明。我会对这个问题做适当的修改来反映这一点。 – ronno 2013-03-20 18:12:44

@ronno我没有提供给你整个文件，这只是一个例子哈哈。新增了一个为您在此布局中添加页脚的示例。 – Ozzy 2013-03-20 18:13:58

@ronno哦，我不认为你注意到了，我稍微改变了你的CSS。有一个区别，正如我上面写的代码示例 – Ozzy 2013-03-20 18:18:26

将高度设置为100时Div缩放至内容

回答

相关问题