Сделать нижний колонтитул с помощью 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, чтобы он был привязан к нижней части.

Ответ 1

Ну, короткий ответ: Вы не можете!
Более длинный ответ? Вы можете подделать его.

Почему вы не можете?

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

Подделать это как?

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

Ответ 2

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

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

Ответ 3

Это сработало для меня как прелесть (изначально из-под-footer-at-bottom-of-page-with-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/whatever:

<body>

    <div id="wrapper">

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

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

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

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

</body>

Ответ 4

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

Ответ 5

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

Вот что это для меня:

footer{
    padding-bottom:10px;
}