Я был удивлен, что не смог найти простой ответ на эту проблему по 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 для работы с (включая мое последнее решение из ответа ниже):
