2010-10-10 70 views
1

我有一个奇怪的问题。我需要在左下角和右下角的网站底部有两个背景(总是将其粘贴到整个浏览器窗口的底部),所以我在CSS中使用了最小高度,如下所示:最小高度不起作用

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

对于内包装格 - height: auto !important; height: 100%; min-height: 100%;

这应该做的伎俩整体,始终显示100%的股利,但它并没有在所有的工作,我得到从中有点绝望。

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

有什么不对的代码?

回答

0

此:

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

是不是真的有必要。你可能想要height: auto; min-height: 100%;

编辑:忽略我的编辑以前写的,我只是忽略了DIV :)

编辑2:歌剧告诉我的div这个高度是551px,但包装DIV的高度仅仅是451px。这是由具有100px底部填充物的包装div引起的,这增加了高度。

+0

身高:自动!重要;应该是IE6的修复,但将其更改为您的解决方案没有帮助:( – Machi 2010-10-10 16:09:34

+0

我编辑我的答案,是否删除填充工作? – 2010-10-10 16:19:29

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> 
+0

嗨,我也这么想,所以我试图添加最小高度的所有包装(因为我需要至少两个底部背景的包装100%但没有发生。 – Machi 2010-10-10 16:13:37