Заставить нижний колонтитул занимать нижнее пространство с помощью css

Я хочу, чтобы мой нижний колонтитул был такой же высоты, как оставшееся нижнее пространство. В настоящее время я использую следующий css для нижнего колонтитула:

clear: both;
float: left;
background-color: #1F1102;
color: #E4F2FA;
min-height: 60px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
padding: 0;
padding-top: 10px;
text-align: left;
width: 100%;
min-width: 1000px;
margin: auto;

Результат:

введите здесь описание изображения

Здесь, как вы можете видеть, черный имеет только минимальную высоту. Я хочу, чтобы он занимал все оставшееся пространство после него [отмечено вопросительными знаками]. Какие изменения я должен сделать, чтобы получить это?

примечание: - Я не хочу давать position:fixed, чтобы он прилипал ко дну.


css footer
person Harry Joy    schedule 26.08.2011    source источник
comment
См. cssstickyfooter.com.   -  person Madara's Ghost    schedule 26.08.2011
comment
+1 @Rikudo Sennin Это хорошее решение всегда прикреплять нижний колонтитул к нижней части области просмотра, но он не меняет свою высоту по отношению к окну браузера.   -  person feeela    schedule 26.08.2011
comment
[stackoverflow.com: html5-page-100-height-issue][1] [1]: stackoverflow.com/questions/11604363/   -  person Nandhakumar    schedule 20.11.2012

Ответы (5)


arrow_upward
19
arrow_downward

Короткий ответ: Вы не можете!
Более длинный ответ? Вы можете подделать это.

Почему ты не можешь?

Потому что элемент блочного уровня не может растягиваться и заполнять пространство по высоте.

Подделка как?

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

person Madara's Ghost    schedule 26.08.2011
comment
На самом деле это элегантное решение. У меня только что была эта проблема, я нашел этот ответ и подумал, какого черта, давайте посмотрим на CSS и посмотрим, насколько сложно это реализовать. После рефакторинга это упростило мой CSS и решило проблему. Спасибо @SecondRikudo! - person Clint Pachl; 14.10.2014
comment
это лучшее решение, и я искал и тестировал полдня. 2 голоса "за"! - person luke_mclachlan; 04.03.2015
comment
@luke_mclachlan На самом деле этот ответ может быть устаревшим. Взгляните на flexbox, возможно, это возможно. - person Madara's Ghost; 04.03.2015
comment
@Second_Rikudo да, я изучил это, попробовал, и это не сработало. Возможно, так бы и было, если бы мне потребовалось больше времени, но ваше решение заняло около 15 секунд ;-) - person luke_mclachlan; 04.03.2015
comment
Теперь это возможно с помощью flexbox с использованием метода, аналогичного описанному здесь philipwalton.github.io/solved-by-flexbox/demos/sticky-footer. Сделайте это, за исключением того, что поместите flex-grow: 1 в элемент нижнего колонтитула вместо элемента содержимого (в статье он указан как flex: 1). - person codemaker; 10.09.2017

arrow_upward
4
arrow_downward

Теперь это возможно с помощью flexbox с использованием метода, аналогичного описанному здесь https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/. Сделайте это, за исключением того, что поместите flex-grow: 1 в элемент нижнего колонтитула вместо элемента содержимого (в статье он указан как flex: 1).

person codemaker    schedule 10.09.2017
comment
В интересах защиты от гниения ссылок у вас есть такой контент: <body><main></main><footer></footer></body>, затем установите стиль тела на display:flex; min-height: 100vh; flex-direction: column и (в вашем случае) стиль нижнего колонтитула на flex: 1. Если вы хотите, чтобы нижний колонтитул зафиксировался в нижней части экрана, вместо этого примените flex: 1 к элементу main. - person divillysausages; 09.05.2019

arrow_upward
1
arrow_downward

Вы действительно не можете сделать диапазон блочных элементов до полной высоты, доступной в CSS. Лучший способ - найти обходной путь, который выглядит одинаково.

Например, вы можете использовать фоновый цвет (для тела/обертки) или центрированное фоновое изображение, расположенное внизу…

person feeela    schedule 26.08.2011

arrow_upward
0
arrow_downward

Это сработало для меня как шарм (изначально из статьи "Как сохранить нижний колонтитул внизу страницы с помощью CSS":

Поместите это в свой css:

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background:#ededed;
    padding:10px;
}
#content {
    padding-bottom:100px; /* Height of the footer element */
}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

Затем в вашем index/master/_layout/независимо:

<body>

    <div id="wrapper">

        <div id="header">
        </div><!-- #header -->

        <div id="content">
        </div><!-- #content -->

        <div id="footer">
        </div><!-- #footer -->

    </div><!-- #wrapper -->

</body>
person RekaB    schedule 10.03.2016

arrow_upward
-5
arrow_downward

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

Это то, что сделало это для меня:

footer{
    padding-bottom:10px;
}
person Asif    schedule 15.12.2013
comment
не работает, или, может быть, вы неправильно поняли вопрос? - person luke_mclachlan; 04.03.2015
comment
@Asif, кроме того, ваше решение добавит бесполезную высоту странице, что сделает вашу страницу прокручиваемой, если только она не будет идеально соответствовать остальной высоте, что я сомневаюсь, что это будет в большинстве случаев. - person Ryan S; 27.07.2016