[英]Bootstrap 3 100% Height DIV with Navbar and Sticky Footer
我有一個使用固定導航欄和粘頁腳的布局。 在主體中,我有一個液體容器,其左側有一列。 我希望該列垂直填充主體(在導航欄和頁腳之間),但是我無法使其正常工作。 我嘗試了所有可以找到的示例,但都沒有成功。
我已經構建了這個JSFiddle來展示我到目前為止所擁有的。
這是我希望實現的目標:
我的HTML:
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 ">
<div class="main-content">
<h1>Hello world.</h1>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
Sticky footer based on <a href="http://getbootstrap.com/examples/sticky-footer-navbar/">Boostrap example</a>.
</div>
</footer>
而我的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: #999999;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container-fluid {
padding-top: 50px;
}
.container-fluid .col-sm-6 {
padding: 0;
}
.navbar {
margin-bottom: 0;
}
.footer {
padding: 15px 0;
}
.main-content {
background: #efefef;
padding: 20px;
height: 100%;
min-height: 100%;
}
您可以使用height:calc(100vh - 110px);
在.main-content
div上。 110px是頁腳的高度+頁眉的高度,該高度是從視口高度中減去的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.