讓頁腳停留在頁面底部（不固定在底部）

我正在嘗試僅在我的網站上創建「.interior-health-main」主體內容類的頁面有一個靜態的頁腳頁面的底部。我希望它在絕對底部，目前如果您在大屏幕上查看我的一些頁面，則會在頁腳之後看到一堆空白區域。我想擺脫這一點。讓頁腳停留在頁面底部（不固定在底部）

我一直在研究這個小時，並嘗試了很多事情，起初我打算讓整個網站的頁腳靜止在頁面底部，但是將頁腳的CSS設置爲位置：絕對衝突我的主頁上的其他元素，這就是爲什麼我只是想要它在「.interior-health-main」上。如果有可能只爲這些頁面上的頁腳進行更改，請讓我知道，我不需要通過將整個主體設置爲相對位置來解決此問題的示例。它只是弄亂了我的主頁。

這裏是什麼樣子與頁腳http://codepen.io/aahmed2/full/KgWNYL/

<p class="nav">This is a Navigation Bar</p> 
<div class="interior-health-main"> 
    <div class="container"> 

     <ol class="breadcrumb"> 
      <li><a href="/index.asp">Home</a></li> 
      <li><a href="/health-resources.asp">Health Resources</a></li> 
      <li class="active">Sample Short Page</li> 
     </ol> 
    <h2>Sample Short Page</h2> 



    </div> 
</div> 

<div class="footer"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-sm-4"> 
     <h4>Contact Us</h4> 
     <p>414 Hardin Hall<br> 3310 Holdredge St<br> Lincoln, NE 68583<br> (402) 472-7363</p> 
     <div class="affiliates"> 
      <a href="http://www.unl.edu/"><img class="wordmark" src="../_logos/wordmark.svg" alt="University of Nebraska-Lincoln Wordmark"></a> 
      <a href="http://extension.unl.edu/"><img class="extension" src="../_logos/n-extension-rev.svg" alt="Nebraska Extension Logo"></a> 
     </div> 
     </div> 

     <div class="col-sm-4"> 
     <h4>Quick Links</h4> 
     <p><a href="#">Human Health</a></p> 
     <div class="line"></div> 
     <p><a href="/resources/pet-diseases.asp">Pet Diseases</a></p> 
     <div class="line"></div> 
     <p><a href="/resources/livestock-disease.asp">Livestock Diseases</a></p> 
     <div class="line"></div> 
     <p><a href="/resources/events.asp">Events</a></p> 
     <div class="line"></div> 
     </div> 

     <div class="col-sm-4"> 
     <h4>Attention</h4> 
     <p>All information on this site is intended for informational use only. Contact your doctor or veterinarian for health concerns.</p><br> 
     <h5><a class="partner" href="#">Partners &amp Stakeholders</a></h5> 

     </div> 
    </div> 

    <div class="copyright"> 
     <div class="col-xs-9"> 
     <h6>© 2016 Nebraska One Health. <a href="/sitemap.asp">Site Map.</a></h6> 
     </div> 

     <div class="col-xs-3"> 
     <a href="#"><img class="social pull-right" src="../_logos/twitter-logo-button.svg" alt="twitter icon"></a> 
     <a href="https://www.facebook.com/nebraskaonehealthresources/"><img class="social pull-right" src="../_logos/facebook-logo-button.svg" alt="facebook icon"></a> 
     </div> 
    </div> 
    </div> 
</div>

這裏後空白的例子是我的CSS

.nav { 
    text-align: center; 
    padding: 25px 0; 
    background-color: #c1c0be; 
    color: #fff; 
    position: fixed; 
    width: 100%; 
    z-index: 2; 
} 

.interior-health-main { 
    padding-top: 80px; 
    padding-bottom: 20px; 
} 

@media (max-width: 479px) { 
    .interior-health-main { 
    padding-top: 50px; 
    } 
} 

.footer { 
    background: #333332; 
    border-top: 9px solid #ffffff; 
    color: #fff; 
    padding-top: 35px; 
    padding-bottom: 35px; 
}

來源

2016-09-23 Abbey

您可以定位頁腳絕對像他們一樣在這裏

https://getbootstrap.com/examples/sticky-footer/

.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    /* background-color: #f5f5f5; */ 
} 

<footer class="footer"> 
    <div class="container"> 
     <p class="text-muted">Place sticky footer content here.</p> 
    </div> 
</footer>

當你嘗試自己的方式時，它是如何相互衝突的？更新你的文章，你做了什麼？

來源

2016-09-23 21:45:23 btedu

我包你的網頁（不含頁腳）進入。第外包裝DIV，和編輯您codePen代碼，只是這一段代碼添加到您的CSS

html, body { 
    height: 100%; 
} 
.page-wrap { 
    min-height: 100%; 
    /* equal to footer height (with margin and border) */ 
    margin-bottom: -299px ; 
} 
.page-wrap:after { 
    content: ""; 
    display: block; 
} 
.footer, .page-wrap:after { 
    /* page-wrap after content must be the same height as footer */ 
    height: 299px; 
}

Demo

來源

2016-09-23 21:55:32

請參考this question找到你的解決方案。

我將上述鏈接中的一個解決方案應用於您的代碼。

將您的代碼包裝在#holder div中。

添加以下CSS：

html,body{ 
height: 100% 
} 

#holder{ 
min-height: 100%; 
position:relative; 
} 

.footer { 
background: #333332; 
border-top: 9px solid #ffffff; 
color: #fff; 
padding-top: 35px; 
padding-bottom: 35px; 
height: 300px; 
width:100%; 
position: absolute; 
left: 0; 
bottom: 0; 
} 

.interior-health-main { 
padding-top: 80px; 
padding-bottom: 300px; /* height of footer */ 
}

這裏是工作提琴： https://jsfiddle.net/DTcHh/25475/

來源

2016-09-23 22:12:07 NickyTheWrench

讓頁腳停留在頁面底部（不固定在底部）

回答

相關問題