我的一些網頁很短。在這些頁面中，頁腳可能會在窗口中間結束，頁腳下面是空格（白色）。這看起來很醜。我希望頁腳位於窗口的底部，並且有限的內容體正在被拉伸。如果頁面較短，則將HTML頁腳保留在窗口的底部

但是，如果網頁很長，而且您必須滾動才能看到頁腳（或全部頁面），則事情應該像平常一樣行事。

用CSS做這件事的正確方法是什麼？我需要Javascript/jQuery來實現這一點嗎？

我只關心IE9 +和現代版本的其他瀏覽器。頁腳的高度也可能因頁面而異，所以我不想依賴高度。

來源

2012-11-12 at.

您可以顯示你使用什麼HTML和CSS幫助自己。 –

爲什麼您的頁腳因頁面而異？（但是既然它確實，頁面之間頁腳的變化有多重要？） – Souta

結帳this site。他有一個很好的教程，如何使用CSS來做到這一點。

我複製了他的CSS，以防馬修的網站被取下。

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
}

編輯

由於頁腳的高度是從頁面到頁面不同，你可以得到頁腳的高度，然後調整#body填充，底部用JavaScript。這裏是一個使用jQuery的例子。

$(function(){ 
    $('#body').css('padding-bottom', $('#footer').height()+'px'); 
});

來源

2012-11-12 18:33:56

看起來它需要我知道我的頁腳高度，可能對我的情況非常困難。 –

-2

不，它很容易爲您的身高設置一個最小值。

這樣： min-height：500px; 那麼最小高度是500px。

來源

2012-11-12 18:06:20 TdeLange

雖然我不知道窗口和其他元素的高度。 –

-2

使用最小高度屬性，儘管不完全可靠，因爲一些舊版本可能不支持它。如果你不介意的話，投入一些JavaScript。

來源

2012-11-12 18:10:45 geekman

這並不能真正解決我的問題。 –

給this一試。

它是Github用來保留頁腳底部的樣式的副本。這是一個有點哈克，並要求您知道您的頁腳的高度（可能不適合你的使用情況工作）

標記

<div class="wrapper"> 
<div class="content"><p>Page Content</p></div> 
<div class="footer-push"></div> 
</div> 

<footer> 
    <p>footer-text</p> 
    <img src="http://placekitten.com/100/100" alt="footer image"> 
</footer>

CSS（嗯，SCSS）

// our page element 

html { 
height:100%; 
} 

body { 
height:100%; 
} 
.wrapper { 
background:gray; 
min-height:100%; 
height: auto !important; // the magic! 
height:100%; 
margin-bottom:-158px; // the height of our footer + margin 
} 

.footer-push { 
clear:both; 
height:158px; // the height of our footer + margin 
} 

footer { 
background:rgba(#a388a3,0.8); 
margin-top:20px; 
height:138px; 
}

這裏重要的事情似乎是：

設置高度：在含有元素（尤指html和body）
瞭解你的頁腳的高度，以及使用的min-heightheight: auto !important和height:100%
100％

希望有所幫助！

來源

2012-11-12 18:37:49

HTML

<body> 
    <div class="example"> 
     <p>Lorem ipsum dolor sit amet consectetur...</p> 
    </div> 

    <footer> 
     <ul> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
     </ul> 
    </footer> 
</body>

CSS

body { 
    min-height: 100%; 
} 

footer { 
    position: absolute; 
    bottom: 0; 
}

來源

2015-12-07 22:54:24 georgecodes

如果頁面較短，則將HTML頁腳保留在窗口的底部

回答

標記

CSS（嗯，SCSS）

相關問題