Тело CSS 100% высоты и переполнение при необходимости

0

Я знаю, как обеспечить, чтобы тело HTML вертикально растягивалось/сжималось до 100% высоты окна просмотра браузера (имея 100% высоты в теле и правилах html).

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

Тем не менее, я не могу достичь обоих.

Т.е. я не могу победить CSS, чтобы убедиться, что когда моя страница просматривается на экране с высоким разрешением, который он вертикально растягивает, чтобы не оставлять пробелов, и чтобы убедиться, что если моя страница просматривается на экране с более низким разрешением, который тело растягивает мимо окна просмотра (для размещения весь контент) и вводит полосы прокрутки.

Для меня это идеальное поведение, и все же я, к сожалению, считаю, что это невозможно добиться исключительно в CSS. Я знаю, что я могу сделать это на JavaScript довольно легко, но я хочу, чтобы это можно было сделать только в CSS.

Возможно ли, или я вынужден использовать JavaScript?

Редактирование: я исследовал, пробовал и тестировал множество методов, но похоже, что это невозможно. Похоже, мне придется вернуться к JavaScript.

Теги:
height

4 ответа

1
Лучший ответ

Хорошо, так что это определенно работает для меня:

html {
   height: 100%;
}

body {
   min-height: 100%;
   display: flex;
}

#wrapper {
   width: 100%; /* Necessary because of side-effect of flex */
   height: 100%;
}

Именно то, что я пробовал раньше, но я думал, что я дам эту новую функцию CSS "flex", и она сделала трюк. Таким образом, похоже, что менеджеры/создатели CSS, наконец, решили эти критические проблемы с динамической высотой и вертикальным центрированием.

Надеюсь, это поможет кому-то еще застрять в этом вопросе.

Поделиться
0

Вдохновляя вопрос, который, похоже, почти такой же, как у меня: сделайте тело 100% высоты браузера

Это работает на меня:

html {
  height: 100%;
}
body {
  min-height: 100%;
}
Поделиться
  • 0
    Но это тоже не работает, потому что тогда контейнеры внутри тела не могут быть растянуты по вертикали с помощью процентной высоты, потому что CSS утверждает, что высота работает, только если родитель имеет фиксированную высоту (то есть тело не может иметь минимальную высоту, но нуждается в высоте). Итак ... вернемся к исходной точке.
0

Вы можете использовать свойство min-height css.

html, body {
  min-height: 100%;
}
Поделиться
  • 0
    Кажется, что это растягивает сущность html до размера области просмотра (хорошо), но, к сожалению, тело также не растягивается. Я попытался сделать html с минимальной высотой 100% и телом 100%, но это дает тот же результат.
0 
min-height: 100%; /* other browsers */
height: auto !important; /* other browsers */
height: 100%; /* IE6: treated as min-height*/
Поделиться
  • 0
    Какое правило / элемент я должен применить это тоже? Я пробовал html сам по себе, html и body; ни то, ни другое не работает.
  • 0
    вам нужно использовать HTML, тело
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню