非常簡單的CSS最小高度100％的問題與保證金

我在尋找建議如何設置一個div到最小高度：100％，當它有一個15px的保證金頂？我想要的是div觸摸屏幕的底部（不觸發滾動條），但是當內容太大而不適合時，它會自動擴展到屏幕限制以下，觸發滾動條。這裏是Ive得到了迄今：非常簡單的CSS最小高度100％的問題與保證金

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
body, html{height:100%; margin:0;} 
body{background:#AAA} 
#main{position:relative; width:970px; margin:0 auto; border:solid 1px #666; background:#FFF; margin-top:15px; min-height:100%;} 
</style> 
</head> 

<body> 
<div id="main"> 
try duplicating this content until it does not fit in the box 
</div> 
</body> 
</html>

來源

2012-01-15 cronoklee

'max-height'也許？ :) – techie007 2012-01-15 19:59:59

可能的重複：http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin – Cyrille 2012-01-15 20:03:28

是的我已經看到這個線程，但嘗試解決方案 - 文本溢出框和該框在現代瀏覽器中保持相同的大小。 – cronoklee 2012-01-15 20:19:33

我找到了解決方法：使用對機體新的CSS3 box-sizing規則和設置padding-top：15px;刪除#main上的margin-top，它的工作原理與上述所有新瀏覽器完全相同。

來源

2012-01-16 13:25:00 cronoklee

您可以使用下面的CSS的DIV固定在底部

#main{position:fixed; bottom : 0px; width:970px; margin:0 auto; border:solid 1px #666; background:#FFF; margin-top:15px; min-height:100%;}

來源

2012-01-15 20:07:58 udnisap

非常簡單的CSS最小高度100％的問題與保證金

回答

相關問題