Фиксированный верхний и нижний колонтитулы Bootstrap с областью содержимого тела прокрутки в контейнере для жидкости

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

Ответы как этот имеют полные полосы прокрутки страницы, что кажется неправильным.

Я просто пытаюсь иметь 100% высоту html и body без полосы прокрутки браузера, но прокрутка видима только в области содержимого тела. Он должен вести себя с высотами меню начальной загрузки и т.д.

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

html {
  height: 100%;
}
html body {
  height: 100%;
  overflow: hidden;
}
html body .container-fluid.body-content {
  position: absolute;
  top: 50px;
  bottom: 30px;
  right: 0;
  left: 0;
  overflow-y: auto;
}

footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
}

Но это кажется неправильным способом, и это, по-видимому, негативно влияет на макеты Bootstrap. Например, если строка меню обертывается до двух строк, область содержимого находится под разделителем nav-bar.

Может ли кто-нибудь сказать мне правильный способ сделать этот стиль, совместимый с готовым приложением MVC Razor/Bootstrap?

Примечания:

Он должен работать с IE8 и далее.
Он должен работать с Bootstrap, поэтому, если Boostrap отрегулирован (размеры заголовка/нижнего колонтитула), он также исправит себя.

Обновление:

Вот JSFiddle для работы с (включая мое последнее решение из ответа ниже):

JSFiddle: http://jsfiddle.net/TrueBlueAussie/6cbrjrt5/

Ответы

Ответ 1

Добавьте следующий css, чтобы отключить прокрутку по умолчанию:

body {
    overflow: hidden;
}

И измените #content css на это, чтобы сделать прокрутку только в теле контента:

#content {
    max-height: calc(100% - 120px);
    overflow-y: scroll;
    padding: 0px 10%;
    margin-top: 60px;
}

Смотрите здесь скрипку.

Edit:

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

html {
  height: 100%;
}
html body {
  height: 100%;
  overflow: hidden;
}
html body .container-fluid.body-content {
  position: absolute;
  top: 50px;
  bottom: 30px;
  right: 0;
  left: 0;
  overflow-y: auto;
}
header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-color: #4C4;
    height: 50px;
}
footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4C4;
    height: 30px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<header></header>
<div class="container-fluid body-content">
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
</div>
<footer></footer>

Ответ 2

Другим вариантом будет использование flexbox.

Пока он не поддерживается IE8 и IE9, вы можете рассмотреть:

Не обращая внимания на те старые версии IE
Предоставление резервной копии
Использование polyfill

Несмотря на то, что для полной поддержки кросс-браузера потребуется некоторое дополнительное префикс для браузера, вы можете увидеть основное использование либо на этот скрипт и в следующем фрагменте:

html {
  height: 100%;
}
html body {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html body .container-fluid.body-content {
  width: 100%;
  overflow-y: auto;
}
header {
    background-color: #4C4;
    min-height: 50px;
    width: 100%;
}
footer {
    background-color: #4C4;
    min-height: 30px;
    width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<header></header>
<div class="container-fluid body-content">
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
</div>
<footer></footer>

Ответ 3

Пока я не получу лучший вариант, это самый "загрузочный" ответ, который я могу решить:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/6cbrjrt5/

Я переключился на использование LESS и включил пакет Bootstrap Source NuGet для обеспечения совместимости (предоставив мне доступ к файлу bootstrap variables.less:

в главной странице _layout.cshtml

Перемещение нижнего колонтитула вне контейнера body-content
Использовать boostrap navbar-fixed-bottom на нижнем колонтитуле
Отпустите <hr/> перед нижним колонтитулом (как теперь избыточным)

Соответствующая страница HTML:

<div class="container-fluid body-content">
    @RenderBody()
</div>
<footer class="navbar-fixed-bottom">
    <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
</footer>

В Site.less

Установите HTML и BODY высоты до 100%
Установите BODY overflow в hidden
Установите body-content div position в absolute
Установите body-content div top на @navbar-height вместо значения жесткой проводки
Установите body-content div bottom в 30px.
Установите body-content div left и right в 0
Установите body-content div overflow-y в auto

Site.less

html {
    height: 100%;

    body {
        height: 100%;
        overflow: hidden;

        .container-fluid.body-content {
            position: absolute;
            top: @navbar-height;
            bottom: 30px;
            right: 0;
            left: 0;
            overflow-y: auto;
        }
    }
}

Остальная проблема заключается в отсутствии определяющей переменной для footer height в бутстрапе. Если кто-то позвонит, скажите мне, есть ли волшебная переменная 30px, определенная в Bootstrap, я был бы признателен.