use*_*403 170 html css footer twitter-bootstrap
我正在使用Bootstrap 3作为我正在设计的网站.
我想要一个像这个样本的页脚. 样品
请注意,我不希望它固定,所以bootstrap navbar-fixed-bottom不能解决我的问题.我只是希望它始终位于内容的底部并且也是响应式的.
任何指南将非常感谢.
编辑:
对不起,如果我不清楚.现在发生的是当内容正文没有足够的内容时.我的页脚向上移动然后在底部留下一个空的空间.
这就是我现在用于导航栏的内容
<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h5 id='footer-header'> SITEMAP </h3>
<div class="col-sm-4" style="padding: 0 0 0 0px">
<p>News</p>
<p>contact</p>
</div>
<div class="col-sm-4" style="padding: 0 0 0 0px">
<p>FAQ</p>
<p>Privacy Policy</p>
</div>
</div>
<div class="col-sm-4">
<h5 id='footer-header'> xxxx </h3>
<p>yyyyyyyyyyyyy</p>
</div>
<div class="col-sm-4">
<h5 id='footer-header'> xxxxx </h3>
<p>uuuuuuuuuuuuuuu</p>
</div>
</div>
</div>
</nav>
CSS
.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}
Jbo*_*aga 308
这里有一个简化的bootstrap解决方案(你不需要创建一个新类):http://getbootstrap.com/examples/sticky-footer-navbar/
当您打开该页面时,右键单击浏览器并"查看源代码"并打开sticky-footer-navbar.css文件(http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar. css)
你可以看到你只需要这个CSS
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
对于这个HTML
<html>
...
<body>
<!-- Begin page content -->
<div class="container">
</div>
...
<footer class="footer">
</footer>
</body>
</html>
Sur*_*S M 123
请参阅下面的示例.如果页面内容较少,则会将页脚定位到底部,如果页面内容较多,则表现得像普通页脚一样.
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
HTML
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
更新:新版本的Bootstrap演示了如何在不添加包装器的情况下添加粘性页脚.有关详细信息,请参阅Jboy Flaga的答案.
Rex*_*les 13
更新:这不完全直接回答问题,但其他人可能会觉得这很有用.
这是响应式页脚的HTML
<footer class="footer navbar-fixed-bottom">
<div class="container">
</div>
</footer>
对于CSS
footer{
width:100%;
min-height:100px;
background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}
注意:在发布此问题时,上面的代码行不会将页脚推到页面内容之下; 但是当页面上的内容很少时,它会阻止页脚在页面中间爬行.有关将页脚推到页面内容下方的示例,请查看http://getbootstrap.com/examples/sticky-footer/
小智 10
使用flexbox,因为您可以随意使用它.bootstrap 4提供的解决方案仍然在响应式布局中搜索重叠内容,例如:它将在移动视图中中断,我遇到最巧妙的技巧是使用此处显示的flexbox解决方案演示:( https://philipwalton.github.io /解决了 - 通过flexbox/demos/sticky-footer /)这样我们就不必处理固定高度问题,这是一个过时的解决方案......现在这个解决方案适用于bootstrap 3和4,无论你使用哪个.
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
对于仍在苦苦挣扎且解决方案无法满足您需求的人来说,这是我找到的最简单的解决方案.
包裹您的主要内容并为其指定最小视图高度.将60调整为您的风格所需的任何值.
<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>
多数民众赞成,它运作良好.
Galen Gidman发布了一个非常好的解决方案,解决了没有固定高度的响应式粘性页脚问题.你可以在他的博客上找到他的完整解决方案:http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
HTML
<header class="page-row">
<h1>Site Title</h1>
</header>
<main class="page-row page-row-expanded">
<p>Page content goes here.</p>
</main>
<footer class="page-row">
<p>Copyright, blah blah blah.</p>
</footer>
CSS
html,
body { height: 100%; }
body {
display: table;
width: 100%;
}
.page-row {
display: table-row;
height: 1px;
}
.page-row-expanded { height: 100%; }