让页脚停留在页面底部（不固定在底部）

我正在尝试仅在我的网站上创建“.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

让页脚停留在页面底部（不固定在底部）

回答

相关问题