堆棧內存溢出
  簡體   English   中英

保持頁腳到底（css）

[英]Keeping footer to the bottom (css)

 原文  2016-09-30 03:35:07  3   7    html/ 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%;

}

現在，如果我有這個position: absolute; 在.footer樣式中，頁腳在頁面加載時位於底部，並在向下滾動時保持在相同的位置。 它也與內容重疊，從這里的小提琴可以看出

如果我刪除position: absolute屬性，則頁腳不在頁面底部，並且將直接位於前一個元素的下方。 看到這里了解我的意思LINK

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

7 個解決方案

解決方案1
 0  2016-09-30 03:39:27

更新ur css如下

檢查jsbin中的輸出鏈接到Jsbin 

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



}


 .footer { position:relative; 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>

解決方案2
 0  2016-09-30 04:01:25

我有更新代碼檢查這個，

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

解決方案3
 0  2016-09-30 04:14:40

看看Chris Bracco 這個精彩的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>

解決方案4
 0  2016-09-30 04:26:39

你應該使用“固定”位置，但你需要給你的身體標簽一個填充底部。 導航欄還需要保證金為零。 

.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

解決方案5
 0  2016-09-30 04:29:23

我喜歡你的問題，我得到了一個解決方案，請復制粘貼到你的HTML，它對我有用 

 /* css */ * { box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box; } html, body { height:100%; width:100%; float:left; } body { margin:0; position:relative; } header { float:left; width:100%; padding:40px; background:#666; } .letter_s { position:relative; float:left; width:100%; min-height: calc(100% - 160px); } footer { float:left; width:100%; padding:40px; background:#666; } 
 <!-- HTML --> <header></header><!-- /header --> <div class="letter_s"> <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> </div><!-- /.letter_s --> <footer></footer><!-- /footer-->

輸入更多字母或添加一些東西，你可以看到會發生什么

解決方案6
 0  2016-09-30 05:52:32

嘗試給出position: relative; 到html標簽。

解決方案7
 0  2017-10-21 23:24:59

您可以在頁腳和其上方的所有內容之間放置一個靈活的間隔元素。 該間隔元件盡可能地擴展和收縮以使頁腳保持在頁面的底部。

這是帶有spacer div的HTML代碼： 

<!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布局。 這種間隔物對於創建適用於許多不同屏幕尺寸的穩定布局非常有用。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 將CSS頁腳放在底部時出現問題 頁腳未保持在底部位置 將頁腳保持在頁面底部 將頁腳放在底部，但不固定 是否將頁腳放在頁面底部？ 將頁腳放在底部 將頁腳放在底部 保留頁腳和頁面底部 將頁腳DIV放在頁面底部 在 Wordpress 上使用 Bootstrap 將頁腳保持在底部
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM