內容佔用頁眉和頁腳之間的所有空間

我的簡單佈局包含頁眉，主要部分和頁腳。頁腳被推到頁面的底部。我希望主要部分採用頁眉和頁腳之間的所有空間。

這是我做了什麼：http://jsfiddle.net/5d3m9/

HTML內容佔用頁眉和頁腳之間的所有空間

<div class="wrap"> 
    <header>header</header> 
    <div class="main">lorem2000 </div> 
    <div class="clear"></div> 
    <footer>@Copyright</footer> 
</div>

CSS

html, body { 
    height: 100%; 
} 

body { 
    margin: 0; 
} 

header { 
    height: 150px; 
    background: orange; 
} 
.wrap { 
    min-height: 100%; 
    position: relative; 
    overflow: hidden; 
} 
.main { 
    background: #00eaea; 
    padding-bottom: 32767px; 
    margin-bottom: -32767px; 
} 
.clear { 
    height: 50px; 
} 
footer { 
    background: #dadada; 
    height: 50px; 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
}

是否有其他/更好的方式來實現這一目標？（不padding-bottom: 32767px; margin-bottom: -32767px;）

來源

2013-02-05 Artem Svirskyi

似乎爲我工作嗎？爲什麼你想擺脫填充底部和邊緣底部？ –

只是有興趣，也許我在這裏製造一輛自行車，並有很多簡單的方法 –

如果內容不適合？它應該滾動嗎？ – gilly3

應用以下樣式.main

.main { 
    background: #00eaea; 
    top: 150px; 
    bottom: 50px; 
    position:absolute; 
    width: 100%; 
}

http://jsfiddle.net/5d3m9/1/

來源

2013-02-05 01:50:00

我不能看到我的小屏幕上的主要。 OK，因爲OP說不需要滾動條？這似乎有點奇怪 –

我誤解了，對不起 - 它應該滾動 –

內容佔用頁眉和頁腳之間的所有空間

回答

相關問題