又一個div高度問題

多年來，我一直在爲此而苦苦掙扎。今年可能會有解決方案。我需要一個標題，內容和頁腳。我希望頁腳位於頁面底部，頁眉位於頂部，內容位於頁面底部。又一個div高度問題

我希望內容有一個滾動條。

問：這太難問了嗎？

來源

2010-06-02 Phillip Senn

答：-----號--- – 2010-06-02 21:59:45

您希望頁眉/頁腳/內容佔據瀏覽器窗口的100％/ 100％，並且具有連續性具有滾動功能的區域？如果是這樣，我可以發送一個例子...如果不是，請改述:) – Zuul 2010-06-02 22:03:48

答：號

CSS：

#content { 
    height: XXXpx; 
    overflow-y: auto; 
}

來源

2010-06-02 22:02:15 mVChr

啊。我的整個問題是我使用overflow-y：visible;而不是汽車; – 2010-06-03 01:51:23

我不能完全肯定這是否真的回答你的問題，但爲得到一個滾動條，如果有必要（例如，如果一個容器的內容超出它的大小）是

overflow: auto

有用於水平選擇性能屬性和垂直滾動條：

overflow-x: auto; 
overflow-y: auto;

但他們是CSS 3.0規範的一部分，並且僅通過瀏覽器（即火狐> 1.5，Opera和Safari）的有限數量的支撐。

來源

2010-06-02 22:00:25

我認爲這是'overflow：scroll;' – Aren 2010-06-02 22:01:58

@Aren'auto'會在必要時顯示滾動條; 'scroll'將始終顯示一個滾動條。 – 2010-06-02 22:05:08

不錯，謝謝你說清楚。爲你+1好，先生。 – Aren 2010-06-02 22:33:13

如果您只想滾動內容，您可以有一個固定的頁眉和頁腳。這是我知道的唯一途徑。看看這個鏈接，實現提示：

http://www.pmob.co.uk/temp/fixedlayoutexample5.htm

來源

2010-06-02 22:00:26 edl

這給你一個固定的頭部和高度50像素的註腳，那就是滾動的內容區域。

<html> 
<body> 
    <div id="header" style="position:absolute; left:0px; top:0px; height: 50px; overflow:hidden"> 
    </div> 
    <div id="content" style="position:absolute; left:0px; top:50px; bottom:50px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; left:0px; bottom:0px; height:50px; overflow:hidden;"> 
</body> 
</html>

來源

2010-06-02 22:00:52

如果頁眉和頁腳具有固定高度：

<style type="text/css"> 
    #header { 
     height: 100px; 
     width: 100%; 
     position: absolute; 
     left: 0; 
     top: 0; 
     background-color: red; 
    } 
    #footer { 
     height: 100px; 
     width: 100%; 
     position: absolute; 
     left: 0; 
     bottom: 0; 
     background-color: green; 
    } 
    #content { 
     width: 100%; 
     position: absolute; 
     left: 0; 
     top: 100px; 
     bottom: 100px; 
     overflow: auto; 
     background-color: blue; 
    } 
</style> 

<body> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</body>

來源

2010-06-02 22:03:00 Anton

又一個div高度問題

回答

相關問題