在兩個固定div元素之間創建滾動div

我對定位div的方式很陌生，希望他們如何在網站中使用，所以我希望有人能在這裏提供幫助。我試圖得到的是一個三明治式的設置，在兩個div的中間滾動內容。這樣我有一個標題div和一個頁腳div，它們都必須在頁面上保持靜態。然後，他們之間，我必須有一個內容div，填補兩個固定divs之間的空間，並有能力滾動它自己的。我將如何去構建像這樣簡單的東西？或者這是不是很簡單？在兩個固定div元素之間創建滾動div

更新：我創建了一個小提琴，我認爲它幾乎是我想要的。我的頁眉和頁腳在頁面上保持靜態。但是，我不得不欺騙主div的頂部邊界，以便它的內容在標題後面開始。我仍然唯一遇到的問題是，內容的末尾在頁腳的底部被切斷。我需要查看整個內容。

小提琴：http://jsfiddle.net/fgskS/18/

謝謝！

來源

2012-10-08 CrystalBlue

你嘗試過什麼了嗎？ – j08691

請參閱http://stackoverflow.com/questions/10056583/fixed-header-footer-and-sidebars-with-scrolling-content-area-in-center/10056827#10056827 – 0b10011

不幸的是，這不適合我。我需要的是頁眉和頁腳是div，並保持完全固定，無論如何，而頁面的主要內容在它們之間滾動。這是做什麼創建一個頁眉和頁腳，並在頁面的頂部創建一個新的滾動條創建一個頁邊距。頁面上應該只有一個滾動條。 – CrystalBlue

只需設置連續元素的高度等於100％，並創下內容DIV滾動在Y軸：

<header> 
    <h1>Sandwich Layout</h1> 
</header> 
<div id="main" role="main"> 

</div> 
<footer> 
    Footer stuff here 
</footer> 

html, 
body { height: 100%; margin: 0; padding: 0; } /* This is important */ 

header, 
footer { background: #ccc; height:20%; } 

#main { height: 60%; overflow-y:scroll; }

小提琴：http://jsfiddle.net/kboucher/3E8Gg/

來源

2012-10-08 21:26:07

這與我所需要的很接近，但我無法在我的網站上找到它。當我使用你的代碼時，我在頂部得到一個小部分或邊距，並在右邊創建第二個滾動條。 – CrystalBlue

如果您希望頁眉和頁腳div佔用最小空間量，該怎麼辦？例如20％可能比需要的多，但實際的數量可能取決於頁面的渲染方式，例如較窄的窗口可能會導致溢出，因此需要更多的垂直空間。 – Michael

如果您將頁眉和頁腳div設置爲固定，則可以爲您的內容創建一個主div，並按您希望的方式滾動。

來源

2012-10-08 21:09:22

很難說沒有看到所有的代碼，但您可能需要做一些CSS重置這行得通。（我在上面的第一個CSS聲明中將margin和padding設置爲0，看看它是否爲你做了什麼。） –

在兩個固定div元素之間創建滾動div

回答

相關問題