Аналогичное решение для @gcedo , но без необходимости добавления промежуточного содержимого, чтобы подтолкнуть нижний колонтитул. Мы можем просто добавить margin-top:auto
в нижний колонтитул, и он будет сдвинут в нижнюю часть страницы независимо от его высоты или высоты содержимого выше.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
.content {
padding: 50px;
background: red;
}
.footer {
margin-top: auto;
padding:10px;
background: green;
}
some content here
Добавьте следующий CSS, чтобы отключить прокрутку по умолчанию:
body {
overflow: hidden;
}
И измените CSS #content
на это, чтобы сделать прокрутку только в теле содержимого:
#content {
max-height: calc(100% - 120px);
overflow-y: scroll;
padding: 0px 10%;
margin-top: 60px;
}
Редактировать:
На самом деле, я не уверен, с какой проблемой вы столкнулись, так как кажется, что ваш CSS работает. Я только добавил HTML и заголовок css:
html {
height: 100%;
}
html body {
height: 100%;
overflow: hidden;
}
html body .container-fluid.body-content {
position: absolute;
top: 50px;
bottom: 30px;
right: 0;
left: 0;
overflow-y: auto;
}
header {
position: absolute;
left: 0;
right: 0;
top: 0;
background-color: #4C4;
height: 50px;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: #4C4;
height: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<header></header>
<div class="container-fluid body-content">
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
</div>
<footer></footer>
Пока я не получу лучший вариант, это самый «загрузочный» ответ, который я могу выработать:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/ 6cbrjrt5 /
Я перешел на использование LESS и включение пакета NuGet Bootstrap Source для обеспечения совместимости (предоставив мне доступ к файлу начальной загрузки variables.less
:
в _layout.cshtml master page
body-content
navbar-fixed-bottom
в нижнем колонтитуле <hr/>
перед нижним колонтитулом (как сейчас избыточно) Соответствующая страница HTML:
<div class="container-fluid body-content">
@RenderBody()
</div>
<footer class="navbar-fixed-bottom">
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
В Site.less
HTML
и BODY
на 100% BODY
overflow
на hidden
body-content
div position
на absolute
body-content
div top
значение @navbar-height
вместо значения жесткого подключения body-content
div bottom
значение 30px
. body-content
div left
и right
в 0 body-content
div [1124. ] до auto
Site.less
html {
height: 100%;
body {
height: 100%;
overflow: hidden;
.container-fluid.body-content {
position: absolute;
top: @navbar-height;
bottom: 30px;
right: 0;
left: 0;
overflow-y: auto;
}
}
}
Остается проблема, по-видимому, нет определяющей переменной для footer height
в начальной загрузке. Если кто-то позвонит, скажите мне, есть ли волшебная переменная 30px, определенная в Bootstrap, я был бы признателен.
Другим вариантом будет использование flexbox .
Хотя это не поддерживается IE8 и IE9, вы могли бы рассмотреть:
Несмотря на то, что для полной кросс-браузерной поддержки понадобится дополнительный префикс стиля, специфичный для браузера, вы можете увидеть основное использование либо на этой скрипке, и по следующему фрагменту:
html {
height: 100%;
}
html body {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
html body .container-fluid.body-content {
width: 100%;
overflow-y: auto;
}
header {
background-color: #4C4;
min-height: 50px;
width: 100%;
}
footer {
background-color: #4C4;
min-height: 30px;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<header></header>
<div class="container-fluid body-content">
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
</div>
<footer></footer>