У меня есть макет, где нижний колонтитул находится внутри тела, потому что у меня есть высота боковой панели на 100%.Содержит нижний колонтитул внизу
Дело в том, что мне нужно поддерживать нижний колонтитул внизу, когда высота содержимого тела меньше высоты экрана.
Здесь я прилагаю Fiddle example, где видно, что нижний колонтитул находится чуть ниже последней линии тела.
Кроме того, когда высота тела превышает высоту экрана, нижний колонтитул должен следовать за последней строкой.
HTML:
<div id="header">GENERAL HEADER</div> <div id="main_body">
<div id="sidebar">SIDE</div>
<div id="body">
the content
<div class="footer">general footer</div>
</div>
</div>
CSS:
* {margin:0; padding:0;}
html {overflow: hidden;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:100;}
body {background:#fff; position:absolute; width:100%; height:100%;overflow: auto;}
#main_body {
background:#fff;
height:100%;
padding:50px 0 0;
box-sizing:border-box;
width:100%;
min-width:900px;
}
#header {
background:#119911;
position:absolute;
width:100%;
min-width:960px;
height:50px;
display:flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-flow: row nowrap;
justify-content:flex-start;
align-items:center;
}
#sidebar {background:#f2f2f2; float:left; width:60px; height:100%; overflow:hidden;}
#body {
background:#c2c2c2;
height:100%;
overflow:scroll;
word-wrap: break-word;
}
.footer {
display: block;
width:100%;
height:60px;
background-color:#551111;
color:#fff;
border-top:1px solid #CDCDCD;
}
Что я должен делать?
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/? –
[https://jsfiddle.net/tjbaezid/jcypsg52/] попытка нижнего колонтитула абсолютная с нижним 0 –
@MostafaBaezid Да, почти, но вопрос в том, что я не хочу перекрывать боковую панель. Я хочу сохранить нижний колонтитул в #body – Apalabrados