CSS使兩個垂直堆疊的div填補視當一個固定高度

我想這將是相當簡單的，但我一直沒能找到解決的辦法。我想要一個帶有2個div的佈局來填充瀏覽器窗口。他們將是100％的寬度和一個在另一個之上。底部的div必須有固定的高度，頂部的div將填充剩下的空間。我想解決：CSS使兩個垂直堆疊的div填補視當一個固定高度

使用CSS只（沒有使用Javascript）
要與IE7 +（例如，沒有CSS計算）兼容
擁有的div
垂直之間沒有重疊滾動的內容頂部股利，如果它不適合該佈局

我曾嘗試以下但邊距似乎沒有任何效果，因此兩個div重疊（由半透明的背景所示）內：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    * { 
     margin: 0; 
     padding: 0; 
    } 
    body, html { 
     height: 100%; 
    } 
    #content { 
     height: 100%; 
     width: 100%; 
     overflow: auto; 
     background: rgba(255,0,0,0.5); 
     margin-bottom: 40px; 
    } 
    #footer { 
     width: 100%; 
     height: 40px; 
     position:absolute; 
     bottom: 0; 
     background: rgba(255,0,0,0.5); 
    } 
</style> 
</head> 
<body> 
    <div id="content"> 
     <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>last line of content</p> 
    </div> 
    <div id="footer"></div> 
</body> 
</html>

JSFiddle

我已經看到了粘頁腳幾種解決方案，但他們似乎都具有的div重疊。這看起來很難嗎？或者我錯過了什麼？任何有識之士將不勝感激！

來源

2013-09-24 Code Monkey

您是否嘗試過這個？

* { 
    margin: 0; 
    padding: 0; 
} 
body, html { 
    height: 100%; 
} 
#content { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    overflow: auto; 
    background: rgba(255,0,0,0.5); 
    margin-bottom: 40px; 
} 
#footer { 
    width: 100%; 
    height: 40px; 
    position: absolute; 
    bottom: 0; 
    background: rgba(255,0,0,0.5); 
}

http://jsfiddle.net/9Zhaa/5/

來源

2013-09-24 03:07:14 lefoy

這似乎已經成功了。我會比較兩者，看看我做錯了什麼。謝謝！ –

我很高興幫助你:) – lefoy

試試你的頁腳和內容設置爲position: relative;和去除margin-bottom:40px。

來源

2013-09-24 03:08:18

我剛試過，但頁腳似乎被推離屏幕。我得到一個雙滾動條。一個用於內容，一個用於滾動頁面以查看頁腳。 [的jsfiddle]（http://jsfiddle.net/mcn3u/） –

置頂頁腳是幾乎相同的粘性標題。

設置#footer的爲position：靜態的。可能需要添加left：0px;

相反邊距使用填充底的：40PX爲＃內容，然後將盒子大小：邊界盒。邊框包括整個維度中的填充（和邊界，因此是名稱）。你的div仍然會重疊，所以layer #footer tm和z-index：99; ＃含有z-index的內容：-1 ;.填充將防止內容重疊，#footer的背景會隱藏其餘內容。
如果border-box與您的內容過多混淆，只需添加一個帶有邊框的內部div以再次調整填充。

來源

2013-09-24 03:46:33 Jason

CSS使兩個垂直堆疊的div填補視當一個固定高度

回答

相關問題