2010-10-10 87 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