CSS 100％高度體不覆蓋整個文檔

我試圖與中心一層這樣創建的HTML文檔：CSS 100％高度體不覆蓋整個文檔

<body> 
<div id="background"> 
    LONG TEXT HERE 
</div> 
</body>

和予設定

html, body { 
    margin: 0; 
    height: 100%; 
    min-height: 100%; 
    background-color: #color1; 
}

和

#background { 
    width: 80%; 
    height: 100%; 
    position: absolute; 
    margin-left: 10%; 
    display: block; 
    margin-right: 10%; 
    background-color: #color2; 
    top: 0px; 
    bottom: 0px; 
}

但不知何故，如果文字超過顯示屏的高度，並且向下滾動時沒有背景。我檢查過FireBug，看起來好像整個文檔只是初始窗口的大小。我需要使它達到100％的身高。你可以幫我嗎？

來源

2013-01-18 Zakkery

刪除高度：100％;和位置：絕對;

它會工作。像下面一樣

#background { 
    width: 80%; 
    margin-left: 10%; 
    display: block; 
    margin-right: 10%; 
    background-color: #093; 
    top: 0; 
    bottom: 0; 
}

來源

2013-01-18 14:11:24

那個作品謝謝 – Zakkery

@Mark甚至0px是不是錯了呢？ –

沒有錯，但一個壞習慣，請儘量避免它，因爲0不需要一個單位。 0Kg == 0px – Mark

如果文本比頁面長，則需要在CSS中設置overflow屬性 - 否則元素將展開以適合其內容。

例如：

overflow: hidden;

雖然這會使一些文字無形的，所以你可能需要使用auto不hidden取決於你在做什麼。

來源

2013-01-18 14:08:55 Fenton

我的解決方案是使用overflow：auto;在html＆body標籤上，並使用絕對定位：0; top：0; right：0; bottom：0;這樣它覆蓋了身體標記和滾動是否包含在正文 – xer21

CSS 100％高度體不覆蓋整個文檔

回答

相關問題