有頁腳拉伸高度來填充視口沒有javascript

我有一個基本的佈局，我希望頁腳在內容後佔用視口的剩餘部分。現在，當我使用下面的代碼它繪製一個滾動條，因爲高度計算爲頁腳高度（100％）加上內容高度（變化），有沒有辦法來防止滾動條沒有計算內容的高度與JavaScript？有頁腳拉伸高度來填充視口沒有javascript

html,body{height:100%;} 
.content {position: relative;} 
.footer{height: 100%; min-height:100%; background-color:green; overflow: hidden; padding-bottom: -2000px;} 

<div class="content"> 
content 
</div> 

<div class="footer"> 
Footer 
</div>

來源

2012-02-08 amirkhan81

在http看看：/ /stackoverflow.com/questions/9160159/full-height-columns-without-scroll。應該是一個很相似的解決方案。 – 0b10011 2012-02-08 16:24:40

<html><head> 
<style type="text/css"> 

body{overflow:hidden;} 
.content {position: relative;} 
.footer{height: 100%; background-color:green; padding-bottom:-2px;margin:0px;} 
</style> 
</head> 

<body> 


<div class="content"> 
content 
</div> 

<div class="footer"> 
Footer 
</div> 
</body> 
</html>

來源

2012-02-08 16:28:47 PAULDAWG

只是一個人擡頭，如果你需要滾動你的內容，這些工作都不會... – amirkhan81 2012-04-26 22:22:04

如果它是隻爲表象的目的，我會做這樣的事情：

HTML

<div id="wrap"> 
    <div id="content"> 
    Your main page content here 
    </div><!-- #content --> 
Your footer content here 
</div><!-- #wrap -->

CSS

html, body { 
    height: 100%; 
    background: #F0F0F0; 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
} 

#wrap { 
    height: 100%; 
    width: 800px; 
    background: #ccc; 
    margin: auto; 
} 

#content { 
    background: #fff; 
}

來源

2012-02-08 16:30:56

有頁腳拉伸高度來填充視口沒有javascript

回答

相關問題