使页脚停留在页面底部(而不是固定在底部)
Make footer stay at bottom of page (not fixed to bottom)
我正试图使只是在我的网站上的网页,有主体内容类".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 & 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;
}
你可以像这里一样将页脚定位为绝对位置
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>
当你尝试你的方式时,它是如何冲突的?用你所做的更新你的帖子?
请参考这个问题找到你的解决方案。
我将上面链接中的一个解决方案应用到你的代码中。
用#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/
我将你的页面(不包含页脚)包装成。page-wrapdiv,并编辑你的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;
}
演示相关文章:
- 将视口底部滚动到元素底部
- HTML5页面底部棒
- 固定位置菜单时滚动,直到它击中一个相对容器的底部
- 将jQuery放在代码的底部
- javascript跨浏览器确定用户是否滚动到页面底部
- 使用重定向来启动应用程序,并且仍然停留在asp.net中的同一页面中
- JS似乎停留在Ajax重新加载页面上的DOM
- 余额仍停留在5000
- 理解 d3.js 源代码:停留在 function.call() 和 “=+”
- jQuery绝对侧边滚动,停在父级的顶部和底部
- 选择不会停留在AngularJS多选绑定中
- FB Timeline应用程序高度停留在800px
- 如何获得下一个/上一个链接以停留在CarouFredSel幻灯片的两侧
- document.body.scroll顶端值停留在0
- AudioContext.当前时间在Chromebook上永远停留在0.010666666
- 倒计时停留在1点
- Javascript动态创建span并垂直对齐文本:文本留在底部
- 将鼠标停留在onclick元素上
- 停留在<李>表单提交后的选项卡
- 为什么倒计时停留在“1”