保持頁腳到底部（css）

這似乎是一個受歡迎的問題，但即使在合併了一些建議後，我也沒有得到期望的結果。保持頁腳到底部（css）

我有一個頁腳，我希望它位於頁面的底部。這裏是我的HTML和CSS：（喜」只是佔位內容）

HTML：

<body> 
<ul> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 

</ul> 

<div class="navbar navbar-default footer"> 
    <div class="container"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#"> Blog </a></li> 
     <li> <a href="#"> Terms of use </a></li> 
     <li><a href="#"> Contact us </a></li> 
    </ul> 
    <a href="#" class="navbar-btn btn-info btn pull-right"> 
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a> 
    </div> 
</div> 

</body>

CSS：

.footer { 
bottom:0; 
position: absolute; 
width:100%; 

} 

body { 

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    height:100%; 
    min-height: 100%; 

}

現在，如果我在.footer風格position: absolute;，然後頁面加載時頁腳處於底部，並且向下滾動時位於同一位置。它也與內容重疊，從小提琴中可以看出here

如果我刪除了position: absolute屬性，那麼頁腳不在頁面的底部，而是直接位於上一個元素的下面。看到這裏明白我的意思LINK

我希望它在頁面的底部。如果這個年齡段的內容很少，那麼它應該一路走到底部，如果頁腳之前有很多內容，那麼它不應該與它們重疊，並且低於所有內容。 jQuery解決方案也很好。

來源

2016-09-30 Keshav Vasudevan

http://stackoverflow.com/questions/18739937/how-to-keep-footer-at-bottom-of-screen – channasmcs

更新烏爾CSS如下

支票jsbin輸出Link to Jsbin

.footer { 
    position:relative; 
    top:225px; 



}

.footer { 
 
\t position:relative; 
 
\t top:225px; 
 

 
    
 

 
} 
 

 
body { 
 

 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
    height:100%; 
 
    min-height: 100%; 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
<ul> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 

 
</ul> 
 

 
<div class="navbar navbar-default footer"> 
 
    <div class="container"> 
 
    <ul class="nav navbar-nav"> 
 
     <li><a href="#"> Blog </a></li> 
 
     <li> <a href="#"> Terms of use </a></li> 
 
     <li><a href="#"> Contact us </a></li> 
 
    </ul> 
 
    <a href="#" class="navbar-btn btn-info btn pull-right"> 
 
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a> 
 
    </div> 
 
</div> 
 

 
</body> 
 

 
</html>

來源

2016-09-30 03:39:27

感謝您的回覆，但這是不正確的。無論窗口大小如何，我都希望頁腳處於最低點。如果說我的窗口高度超過225像素，那麼這個答案就不會成立。感謝您花時間回答 –

您是否想要固定頁腳 –

不，我希望它能成爲您在網站上看到的常規頁腳，例如stackoverflow –

我有更新的代碼進行檢查，

CSS

.footer { 
    bottom:0; 
    position: fixed; 
    width:100%; 
    margin-bottom: 0 !important; 
} 
.content { 
    position: relative; 
} 
body { 

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    height:100%; 
    min-height: 100%; 
}

HTML

<div class="content"> 
<ul> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 

</ul> 
<div> 
<div class="navbar navbar-default footer"> 
    <div class="container"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#"> Blog </a></li> 
     <li> <a href="#"> Terms of use </a></li> 
     <li><a href="#"> Contact us </a></li> 
    </ul> 
    <a href="#" class="navbar-btn btn-info btn pull-right"> 
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a> 
    </div> 
</div> 
</div>

bootply

來源

2016-09-30 04:01:25 CasperSL

退房this精彩CodePen由克里斯·布拉科，它會解決你的問題。

/** 
 
* Demo Styles 
 
*/ 
 

 
html { 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 

 
body { 
 
    position: relative; 
 
    margin: 0; 
 
    padding-bottom: 6rem; 
 
    min-height: 100%; 
 
    font-family: "Helvetica Neue", Arial, sans-serif; 
 
} 
 

 
.demo { 
 
    margin: 0 auto; 
 
    padding-top: 64px; 
 
    max-width: 640px; 
 
    width: 94%; 
 
} 
 

 
.demo h1 { 
 
    margin-top: 0; 
 
} 
 

 
/** 
 
* Footer Styles 
 
*/ 
 

 
.footer { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 1rem; 
 
    background-color: #efefef; 
 
    text-align: center; 
 
}

<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<div class="demo"> 
 
    <h1>CSS 「Always on the bottom」 Footer</h1> 
 

 
    <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p> 
 

 
    <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p> 
 

 
    <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p> 
 

 
    <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p> 
 
</div> 
 

 
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

來源

2016-09-30 04:14:40

你應該使用位置「固定」的，但你需要給你的身體標記填充底部。此外，導航欄還需要一個零邊距。

.footer { 
    position:fixed; 
    bottom:0px; 
    width:100%; 
} 
.footer.navbar { 
    margin-bottom:0px; 
} 

body { 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    height:100%; 
    min-height: 100%; 
    padding-bottom:120px; // whatever size you need 
}

Bootply：http://www.bootply.com/e1EQiagcBd

來源

2016-09-30 04:26:39 Daniel

我已經喜歡你的問題，我得到了一個解決方案，請複製此粘貼到你的HTML，它是爲我

/* css */ 
 

 

 
* { 
 
\t box-sizing:border-box; 
 
\t -moz-box-sizing:border-box; 
 
\t -ms-box-sizing:border-box; 
 
\t -webkit-box-sizing:border-box; 
 
} 
 
html, body { 
 
\t height:100%; 
 
\t width:100%; 
 
\t float:left; 
 
} 
 
body { 
 
\t margin:0; 
 
\t position:relative; 
 
} 
 
header { 
 
\t float:left; 
 
\t width:100%; 
 
\t padding:40px; 
 
\t background:#666; 
 
} 
 
.letter_s { 
 
\t position:relative; 
 
\t float:left; 
 
\t width:100%; 
 
\t min-height: calc(100% - 160px); 
 
} 
 
footer { 
 
\t float:left; 
 
\t width:100%; 
 
\t padding:40px; 
 
\t background:#666; 
 
}

<!-- HTML --> 
 

 
<header></header><!-- /header --> 
 

 
<div class="letter_s"> 
 
\t <p>he soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soule soulution this is the soulutionthis is the soulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution th is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulution</p> 
 
\t  
 
</div><!-- /.letter_s --> 
 

 
<footer></footer><!-- /footer-->

工作

鍵入更多字母或添加內容即可看到會發生什麼

來源

2016-09-30 04:29:23

嘗試將position: relative;添加到html標記中。

來源

2016-09-30 05:52:32

您可以在頁腳和其上面的所有內容之間放置一個靈活的間隔元素。此間隔元素根據需要展開和收縮，以將頁腳保留在頁面的底部。

下面是HTML代碼與間隔DIV：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 

<body> 
<ul> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
</ul> 

<div class="spacer"></div> 

<div class="navbar navbar-default footer"> 
    <div class="container"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#"> Blog </a></li> 
     <li> <a href="#"> Terms of use </a></li> 
     <li><a href="#"> Contact us </a></li> 
    </ul> 
    <a href="#" class="navbar-btn btn-info btn pull-right"> 
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a> 
    </div> 
</div> 

</body> 
</html>

這裏是CSS：

body { 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
} 

.spacer{ 
    flex:1; 
}

我已經在我的Chrome瀏覽器測試此代碼，它完美的作品。

您可以在MDN閱讀更多關於靈活箱： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

添加一個HTML元素作爲間隔可能不適合造型的網頁推薦的做法。但是像這樣的靈活間隔符通常在Android和iOS佈局中使用。這種墊片對於創建一個穩定的佈局非常有用，該佈局適用於許多不同的屏幕尺寸。

來源

2017-10-21 23:24:59 Mike

保持頁腳到底部（css）

回答

相關問題