Нижний нижний нижний колонтитул

Question

Хорошо, у меня есть проблема, чтобы заставить нижний колонтитул на дно, когда недостаточно содержимого, чтобы его туда направить.

Я частично решил проблему. Это простой дизайн, у меня заголовок, содержание и нижний колонтитул, все внутри обертки div.

html, 
body { 

margin:0; 
padding:0; 
height:100%; 
font: sans-serif; 
} 

#wrapper { 
min-height:100%; 
position:relative; 
} 

#content { 
padding: 2% 5%; 
max-width: 940px; 
margin: 0 auto; 
padding-bottom:80px; /* Height of the footer element */ 
clear: both; 
background-color: yellow; 
} 

footer { 
background:#ffab62; 
width:100%; 
height:80px; 
position:absolute; 
bottom:0; 
left:0; 
font-size: 0.75em; 
text-align: center; 
padding-top: 30px; 
clear: both; 
color: #ccc; 
} 

Я использовал цвет фона, чтобы увидеть положение элементов на странице. Поэтому, когда недостаточно содержания, нижний колонтитул находится внизу, и все в порядке. Когда есть более чем достаточно, нижний колонтитул перекрывает некоторые из них, он фиксируется, когда я помещаю позицию в нижний колонтитул вместо абсолютного, но затем на страницы, где недостаточно содержания, нижний колонтитул не находится внизу. Фиксирование другого не является хорошим и исправление того, что другая первая страница не хороша .. Есть ли какое-то решение, которое может помочь мне решить эту проблему ...

Answer 1

Отрегулируйте min-height: до минимального значения, в котором вы хотите, чтобы нижний колонтитул закончился, 100% будет располагать его прямо ниже ваш контент (который должен быть по умолчанию в любом случае, даже не объявляя), о котором вы сказали, недостаточно долго; сделайте minimum-height: 900px; или аналогично тому, где вы хотите, чтобы минимальная конечная точка находилась там, где будет находиться нижний колонтитул.

Если нижний колонтитул находится в правильном месте в HTML, но он плавает. Затем рассмотрим ниже.

display:inline-block; 

добавить в нижний колонтитул.

footer { 
    display: inline-block; 
} 

Если они не работают, покажите свой HTML!

Answer 2

Вы почти сделали это :)

Ваше содержание DIV является перекрывающихся липкую колонтитула из-за его высоты. Просто используйте высоту: calc (100% - footer_height); и начните свой контент, где заканчивается ваш заголовок.

Это пример использования JSFiddle.

CSS файл

html, 
body { 
    margin: 0; 
    height: 100%; 
} 

.container { 
    min-height: 100%; 
    position: relative; 
} 

.header { 
    background: #d6d6d6; 
    position: absolute; 
    height: 80px; 
    width: 100%; 
    top: 0; 
    left: 0 
} 
.content { 
    position: absolute; 
    top: 80px; 
    left: 0; 
    width: 100%; 
    height: calc(100% - 80px); 
    background: yellow; 
} 
.footer { 
    background: #d6d6d6; 
    position: absolute; 
    height: 80px; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    clear: both; 
} 

Я надеюсь, что это полезно.