Footer всегда внизу с фиксированным заголовком/высотой

Question

Ok, так что я пытаюсь выяснить, как получить это разработало:

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="container></div> 
    <div id="footer></div> 
</div> 

Заголовок должен иметь position: fixed (всегда в верхней части экрана) но контейнер-div должен начинаться ниже фиксированного заголовка div, а не под ним.

Нижний колонтитул всегда должен находиться в нижней части страницы. Не зафиксировано.

Есть ли простой быстрый способ решить эту проблему (CSS)? Я могу заставить его «почти» работать, но когда я пытаюсь расположить контейнер-div ниже (вместо ниже) заголовка, вся страница испортится.

Это то, что я имею в виду: http://jsfiddle.net/jskjvpkv/1/

Я нашел свое собственное решение, увидеть мой ответ.

Answer 1

Я не совсем уверен, что ваша проблема:

Если это то, что заголовок не в верхней попробовать это в его CSS:

top: auto; 
bottom: 100%; 

Footer должно быть:

position: static; 
top: 100%; 
bottom: auto; 

Если у вас есть заголовок наложения других элементов, которые вы должны добавить отступы:

padding-bottom: 10px; 

или какой-либо большой ваш заголовок.

Answer 2

Вам нужно добавить top: 0px к вашим header DIV, а затем присвоить margin-top ваших container DIV, который равен высоту фиксированной header, как следующий CSS:

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 
#wrapper { 
 
    min-height: 100%; 
 
    position: relative; 
 
} 
 
#header { 
 
    background: rgba(0, 0, 0, 1); 
 
    height: 60px; 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 0px; 
 
} 
 
#container { 
 
    margin-top: 60px; 
 
    padding-bottom: 3.75em; 
 
    background: #c00; 
 
    height: 1000px; 
 
} 
 
#footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 3.75em; 
 
    background: rgba(0, 0, 0, 0.5); 
 
}

<div id="wrapper"> 
 
    <div id="header"></div> 
 
    <div id="container">Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.</div> 
 
    <div id="footer"></div> 
 
</div>

jsFiddle Demo.

Answer 3

Вы можете сделать это, как этот

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 
#wrapper { 
 
    min-height: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
#header { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    height: 60px; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
#container { 
 
    position: relative; 
 
    top: 60px; 
 
    background: #c00; 
 
    min-height: calc(100% - 60px); 
 
} 
 
#footer { 
 
    width: 100%; 
 
    height: 3.75em; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    position: relative; 
 
}

<div id="wrapper"> 
 
    <div id="header"></div> 
 
    <div id="container"></div> 
 
    <div id="footer"></div> 
 
</div>

Answer 4

Это было решение, которое работало лучше для меня:

html, 
 
body { 
 
\t margin:0; 
 
\t padding:0; 
 
\t height:100%; 
 
} 
 
#wrapper { 
 
\t min-height:100%; 
 
\t position:relative; 
 
} 
 
#header { 
 
\t background:#ededed; 
 
\t padding:10px; 
 
} 
 
#content { 
 
\t padding-bottom:100px; 
 
} 
 
#footer { 
 
\t background:#ffab62; 
 
\t width:100%; 
 
\t height:100px; 
 
\t position:absolute; 
 
\t bottom:0; 
 
\t left:0; 
 
}

<div id="wrapper"> 
 
    <div id="header"></div> 
 
    <div id="content"></div> 
 
    <div id="footer"></div> 
 
</div>