如何使頁眉和頁腳之間的DIV高度達到100％

有沒有辦法設置一個佈局，使頁眉爲50px，正文爲100％，頁腳爲50px？如何使頁眉和頁腳之間的DIV高度達到100％

我希望身體至少用完整個觀看區域。我想有頁腳和標題要在屏幕上在任何時候都

來源

2012-04-19 Arcadian

http://stackoverflow.com/questions/6158975/css-100-height-layout – Samich 2012-04-19 12:45:07

如果正文中的內容溢出屏幕高度，您會希望什麼行爲？ – bendataclear 2012-04-19 12:45:34

我創建的jsfiddle一個例子：

修訂的jsfiddle：http://jsfiddle.net/5V288/1025/

HTML：

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

CSS ：

html { height: 100%; } 
body { 
    height:100%; 
    min-height: 100%; 
    background: #000000; 
    color: #FFFFFF; 
    position:relative; 
} 
#header { 
    height:50px; 
    width:100%; 
    top:0px; 
    left:0px; 
    background: #CCCCCC; 
    position:fixed; 
} 
#footer { 
    height:50px; 
    width:100%; 
    bottom:0px; 
    left:0px; 
    background: #CCCCCC; 
    position:fixed; 
} 
#content { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    height:100%; 
    padding: 0 20px; 
} 
#content > div { 
    padding: 70px 0; 
}

沒有邊界框的內容將是黑ght 100％+ 140px填充。使用邊框時，內容高度將爲100％，並且填充將位於內部。

來源

2012-04-19 12:56:38 WolvDev

在JSFiddle不可用的情況下，[在此包含一些代碼]（http://stackoverflow.com/a/12907900/1269037）會很好。順便說一下，「盒子大小：邊框」似乎沒有任何區別。 – 2012-10-16 05:12:50

沒有邊框的內容將是高度100％+ 140px填充。使用邊框時，內容高度將爲100％，並且填充將位於內部。 – WolvDev 2012-10-16 06:27:53

滾動時不起作用，頁腳與內容一起滾動。 – Roaders 2016-01-20 10:28:10

只是爲了安德烈亞斯·溫特的解決方案修復：

http://jsfiddle.net/5V288/7/

*隨着它的解決方案，問題就出來了，如果含量大於可用窗口面積更大。

來源

2012-04-19 13:17:44

感謝您的支持 - 我一直在努力尋找固定頁眉和頁腳，滾動100％的中心區域。這是完美的，現在可以有EPIC佈局！^__^ – Jason 2013-05-25 20:12:12

yayyyyyyy，我很高興幫助你：3 – 2013-05-27 19:26:40

我想你要找的是「多個絕對座標」。列表除了有一個解釋here但基本上，你只需要指定人體的位置是絕對的，同時設置top: 50px和bottom: 50px：

<body> 
<style> 
#header { 
    position: absolute; 
    height: 50px; 
} 

#body {  
    position: absolute; 
    top: 50px; 
    bottom: 50px; 
    background-color: yellow; 
} 

#footer { 
    position:absolute; 
    height: 50px; 
    bottom: 0; 
} 
</style> 
<div id="header">Header</div> 
<div id="body">Content goes here</div> 
<div id="footer">Footer</div>

http://www.spookandpuff.com/examples/absoluteCoordinates.html顯示更漂亮的方式的技術。

來源

2012-10-16 05:12:00

如何使頁眉和頁腳之間的DIV高度達到100％

回答

相關問題