将高度设置为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声明使问题消失。因此,我更改了代码示例以包含声明。
答
你的错误是将'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>
你尝试使用Firebug查看适用的CSS到那个div? – 2013-03-20 17:52:19
@IvayloStrandjev我试过使用检查元素。它说适用于它的唯一样式是'height:100%;' – ronno 2013-03-20 18:03:04