CSS: Положение DIV в нижней части страницы

Это пример HTML страницы:CSS: Положение DIV в нижней части страницы

<html> 
    <body> 
    <div class="content"> 
    </div> 
    <footer>&nbsp;</footer> 
    </body> 
</html>

Это мой стиль листа:

html { 
    height: 100%; 
} 

body { 
    position: relative; 
    margin: 0; 
    height: 100%; 
} 

.content { 
    width: 8cm; 
    position: absolute; 
    background-color: #ff0; 
    height: 15cm; 
} 

footer { 
    position: absolute; 
    bottom: 0; 
    background-color: #f00; 
    width: 100%; 
}

Вот как это выглядит:

How the code is rendered.

Моя проблема в том, что я хочу, чтобы красный нижний колонтитул находился в нижней части страницы (а не внизу окна просмотра), считая, что .content имеет фактическую переменную высоту. Возможно ли это без JavaScript?

источник

2015-05-04 theV0ID

Вы имеете в виду 'footer {position: fixed;}'? – Stickers

@sdcr Нет, как я писал явно, я не хочу, чтобы нижний колонтитул оставался внизу окна просмотра, но внизу страницы, т. Е. Тела. – theV0ID

Есть ли какая-то особая причина, по которой вы используете 'position: absolute' как для содержимого, так и для нижнего колонтитула? – Stickers

This Fiddle показывает колонтитула, который всегда либо на самой низкой точке на странице или на нижней части окна просмотра.

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

Для этого используйте min-height на body, как это:

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
    position: relative; 
} 

footer { 
    position: absolute; 
    bottom: 0; 
}

Испытано в Safari 8.0.3.

источник

2015-05-04 23:19:38 anroesti

Это не работает с 'position: absolute' на моем' content' или '' main', протестированном с Chrome и Firefox. Мне нужна эта позиция: абсолютная, потому что мне нужно разместить контент относительно его родителя. – theV0ID

Это потому, что если вы используете 'position: absolute' в контенте, для него не будет зарезервировано никакого места. Вам нужно найти другое обходное решение, если удаление «position: absolute» из содержимого не является вариантом. – anroesti

CSS: Положение DIV в нижней части страницы

ответ

Смежные вопросы