1
У меня есть макет с использованием фиксированного навигатора и липкого нижнего колонтитула. В основном корпусе у меня есть контейнер для жидкости со столбцом, расположенным слева. Я хочу, чтобы этот столбец вертикально заполнил основное тело (между навигатором и нижним колонтитулом), однако я не могу заставить его работать. Я пробовал все примеры, которые я могу найти, безрезультатно.Bootstrap 3 100% Высота DIV с Navbar и 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%;
}