最小高度不起作用

时间:2010-10-10 15:49:16

标签: html css

我有一个奇怪的问题。我在左下角的网站底部需要两个背景(总是将它粘贴到整个浏览器窗口的底部)所以我在CSS中使用了min-height,如下所示:

对于正文,html - height: 100%;

对于内部换行div - height: auto !important; height: 100%; min-height: 100%;

这应该完成整个技巧并始终显示100%的div,但它根本不起作用,我有点绝望了。

以下是演示:http://clients.youweyoucoding.com/jm/peter-bilka/crescita/

代码中有什么问题吗?

2 个答案:

答案 0 :(得分:1)

我认为你的额外包装可能会引起你的问题。

我可能会回到基本的100%高度布局,然后添加你的内容。

适用于所有浏览器,包括IE6。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>100% Height CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
#container {
min-height: 100%;
background-color: #CCC;
width: 75%;
margin: 0 auto;
}
* html #container {
height: 100%;
}</style>
</head>
<body>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
</div>
</body>
</html>

答案 1 :(得分:0)

此:

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

不是必需的。您可能需要height: auto; min-height: 100%;

编辑:忽略我在编辑之前写的内容,我只是忽略了div:)

编辑2:Opera告诉我div的高度是551px,但是包装器div的高度只有451px。这是由于包装div具有100px的底部填充,这会增加高度。