Липкий нижний колонтитул и содержание с высотой 100%

Question

Липкий нижний колонтитул и содержание с высотой 100%

8

Я хочу страницу с липким нижним колонтитулом, которая не перекрывает заголовок, а только тело. Как и в эта скрипка. Но теперь я хочу, чтобы этот контент (пунктирная коробка) имел 100% высоту тела.

html

<div class="navbar navbar-inverse navbar-fixed-top"></div>
<div class="container">
   <div class="content-container">
      <div class="my_content">Full height ??</div>
      <div class="push"></div>
   </div>
   <div class="footer"></div>
</div>

CSS

html,
    body {
        height: 100%;
        overflow: hidden;
    }

    body {
        padding-top: 50px;
    }

    .container {
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
    }

    .content-container {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        padding-top: 15px;
        padding-bottom: 15px;
        min-height: 100%;
        margin-bottom: -60px;
    }

    .footer {
        position: relative;
        width: 100%;
        background-color: red;
    }

    .footer,
    .push {
        height: 60px;
    }

    .my_content {
        border: 1px dotted;
        width: 100%;
        height: 100%;
        min-height: 200px;
        min-width: 300px;
    }

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

user3714967 11 март 2015, в 09:10

Источник

Теги:

html

css

html5

css3

sticky-footer

2 ответа

-2

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

http://jsfiddle.net/0dbg9ko2/12/

.footer {
position: fixed;
bottom:0;
left:0;
background-color: red;
}

и я могу внести некоторые изменения в html

RAJ 11 март 2015, в 08:02

0

полоса прокрутки находится под нижним колонтитулом, когда он появляется
user3714967 11 март 2015, в 07:28
0

хорошо, подождите, я могу отредактировать
RAJ 11 март 2015, в 07:31
0

теперь вы можете проверить новую скрипку
RAJ 11 март 2015, в 07:42
0

нет, я не хочу фиксированный нижний колонтитул. Я бы хотел нижний колонтитул, как в моей скрипке. Я только хочу иметь содержание 100% высоты тела
user3714967 11 март 2015, в 07:48
0

Да, хотя этот ответ предоставляет решение с нижним колонтитулом, прикрепленным к нижней части области просмотра, он не имеет отношения к требованию содержимого с высотой 100%.
Luke 27 окт. 2016, в 00:25

Показать ещё 3 комментария

Ещё вопросы

полоса прокрутки находится под нижним колонтитулом, когда он появляется
хорошо, подождите, я могу отредактировать
теперь вы можете проверить новую скрипку
нет, я не хочу фиксированный нижний колонтитул. Я бы хотел нижний колонтитул, как в моей скрипке. Я только хочу иметь содержание 100% высоты тела
Да, хотя этот ответ предоставляет решение с нижним колонтитулом, прикрепленным к нижней части области просмотра, он не имеет отношения к требованию содержимого с высотой 100%.

Jayx · Accepted Answer · 2015-03-11T12-26-00.000Z

Вы можете установить .my_content на 100% высоты видового экрана за вычетом высоты и (вертикального) заполнения других элементов (например, высоты заголовка, высоты нижнего колонтитула, верхнего и нижнего отступов на .content-container) на вашей странице, например

.my_content {
  min-height: calc(100vh - 140px);
}

DEMO

Если ваш верхний и нижний колонтитулы имеют переменную высоту, это не будет работать.