Занять div`ом всю оставшуюся высоту. Как?
Использую Bootstrtap 4. div-у с классом h100percent необходимо занять всю оставшуюся высоту в div-е wrapper . При этом Header фиксированной высоты располагается сверху, а footer фиксированной высоты снизу. Высота блока 100% т.е. разная от монитора к монитору. P.S. В div .h100percent будет другой див размером больше него самого, т.е. должна быть полоса прокрутки overflow: auto. h100percent должен занять оставшееся место по высоте от футера и хэдера. P.P.S «Как всегда прижимать footer к низу экрана?» не решает моей проблемы, там блок контента не занимает все оставшуюся высоту.
div < padding: 10px; >.wrapper < position: fixed; width: 300px; height: 100%; >.h100percent < /* Занять все оставшееся место */ > Help me! Header Этот блок должен занять всю оставшуюся высоту Foter Отслеживать
задан 18 окт 2017 в 10:39
1,670 1 1 золотой знак 18 18 серебряных знаков 33 33 бронзовых знака
Возможный дубликат вопроса: Как всегда прижимать footer к низу экрана?
18 окт 2017 в 11:06
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Для такой задачи подходит flex-box . Нужно разместить блоки в контейнере flex 100%-высоты, а в блок, который нужно растянуть, добавить правило flex-grow
.flex < display: flex; flex-direction: column; height: 100vh; >body < margin: 0; padding: 0 >.header < background: green >.h100 < background: yellow; flex-grow: 3 >.footer
Отслеживать
ответ дан 18 окт 2017 в 13:15
9,720 2 2 золотых знака 17 17 серебряных знаков 49 49 бронзовых знаков
Сделать div (высота) занимающим оставшуюся высоту родителя
У меня есть контейнер div с двумя детьми. Первый ребенок имеет заданный рост. Как мне сделать так, чтобы второй дочерний div элемент занимал «свободное место» контейнера, не задавая определенной высоты?
В этом примере розовый цвет div должен занимать также белое пространство.
Но я не хочу давать абсолютную позицию .
Я пробовал als дать высоту второго ребенка 100%, но не получилось: jsfiddle.net/S8g4E/1
Расширение #down дочернего элемента, чтобы заполнить оставшееся пространство, #container может быть выполнено различными способами в зависимости от поддержки браузера, которую вы хотите достичь, и от того, #up имеет ли она определенную высоту.
Образцы
.container width: 100px; height: 300px; border: 1px solid red; float: left; > .up background: green; > .down background: pink; > .grid.container display: grid; grid-template-rows: 100px; > .flexbox.container display: flex; flex-direction: column; > .flexbox.container .down flex-grow: 1; > .calc .up height: 100px; > .calc .down height: calc(100% - 100px); > .overflow.container overflow: hidden; > .overflow .down height: 100%; > class="grid container"> class="up">grid />grid />grid /> class="down">grid />grid />grid /> class="flexbox container"> class="up">flexbox />flexbox />flexbox /> class="down">flexbox />flexbox />flexbox /> class="calc container"> class="up">calc />calc />calc /> class="down">calc />calc />calc /> class="overflow container"> class="up">overflow />overflow />overflow /> class="down">overflow />overflow />overflow /> Run code snippet Hide results
Сетка
grid Макет CSS предлагает еще один вариант, хотя он может быть не таким простым, как модель Flexbox. Однако для этого требуется только стилизация элемента контейнера:
.container display: grid; grid-template-rows: 100px >В grid-template-rows определяет первую строку как фиксированную высоту 100 пикселей, а оставшиеся строки автоматически растягиваются, чтобы заполнить оставшееся пространство.
Я почти уверен, что IE11 требует -ms- префиксов, поэтому не забудьте проверить функциональность в браузерах, которые вы хотите поддерживать.
Flexbox
Модуль flexbox CSS3 Flexible Box Layout ( ) теперь хорошо поддерживается и его очень легко реализовать. Поскольку он гибкий, он работает даже тогда, когда #up не имеет определенной высоты.
#container #down Важно отметить, что поддержка IE10 и IE11 для некоторых свойств flexbox может содержать ошибки, а IE9 или более ранняя версия не поддерживает вообще.
Расчетная высота
Еще одно простое решение — использовать функциональный блок CSS3 calc , как указывает Альваро в своем ответе , но для этого требуется, чтобы высота первого дочернего элемента была известным значением:
#up #down Он довольно широко поддерживается, с единственными заметными исключениями: calc в сочетании с преобразованием или box-shadow , поэтому обязательно проверьте в нескольких браузерах, если это вас беспокоит.
Другие альтернативы
Если старше необходима поддержка, вы могли бы добавить height:100%; к #down сделают розовую Диву полную высоту, с одной оговоркой. Это вызовет переполнение контейнера, потому что #up толкает его вниз.
Следовательно, вы можете добавить overflow: hidden; в контейнер, чтобы исправить это.
В качестве альтернативы, если высота #up фиксирована, вы можете расположить ее абсолютно внутри контейнера и добавить верхнюю обивку к #down .
И еще один вариант — использовать отображение таблицы:
#container #up #down < background: pink; display: table-row;>Как заполнить оставшуюся высоту css
Использую Bootstrtap 4. div-у с классом h100percent необходимо занять всю оставшуюся высоту в div-е wrapper . При этом Header фиксированной высоты располагается сверху, а footer фиксированной высоты снизу. Высота блока 100% т.е. разная от монитора к монитору.
P.S. В div .h100percent будет другой див размером больше него самого, т.е. должна быть полоса прокрутки overflow: auto. h100percent должен занять оставшееся место по высоте от футера и хэдера. P.P.S «Как всегда прижимать footer к низу экрана?» не решает моей проблемы, там блок контента не занимает все оставшуюся высоту.
Для такой задачи подходит flex-box . Нужно разместить блоки в контейнере flex 100%-высоты, а в блок, который нужно растянуть, добавить правило flex-grow
Если header и footer фиксированной высоты, допустим по 70px , можно сделать так:
Тогда ваш .h100percent получит высоту, равную высоте окна браузера и вычтет высоту хедер+футер
Как сделать, чтобы контейнер занял оставшееся место по высоте?
Как сделать, чтобы iframe занял всё оставшееся свободное место в ячейке таблицы?
Подскажите, как огромный iframe вложить в ячейку таблицы так, чтобы всё что выступает — было.
Как сделать чтобы столбец в ListView занимал все оставшееся место?
Как сделать чтобы столбец в ListView занимал все оставшееся место? В <Grid.ColumnDefinition> можно.
Как посчитать, кто занял первое место по результатам нескольких игр?
Добрый день. Играет 3 человека (в настолку, но это неважно). Как считать, кто победил (по итогам.
Как сделать чтобы div растягивался по высоте документа
Здравствуйте уважаемые форумчане. Есть такой пример кода https://jsfiddle.net/wodgtsdd/ *
Русские Блоги
Как добиться, чтобы div заполнял оставшееся пространство ширины родительского контейнера
Многие друзья сталкивались с таким требованием: есть два блока div, первый имеет фиксированную ширину, а второй должен заполнить оставшуюся ширину всего родительского контейнера. Как добиться?
Вот небольшая хитрость, но есть много ограничений.
.parent < width:100%; >/** * Используется для очистки родительского контейнера, вызванного плавающим, не открывается */ .parent:before, .parent:after < content: " "; display: table; >.parent:after < clear: both; >/***********************/ / *********** Вы должны убедиться, что левая метка написана после правой, в противном случае вам нужно установить z-index для левой ************ / .left < display: block; width:200px; float: left; >.right Как показано выше, кроме того, свойство width CSS3 добавляет новый материал, подобный следующему:
width: calc (100% -200px); добавьте его прямо справа, замените все вышеперечисленные стили, это тоже может быть достигнуто, но это значение атрибута относительно новое, см. здесь для совместимостиСовместимость браузера с CSS width: значение атрибута calc
Интеллектуальная рекомендация
Как flex-grow выделяет оставшееся пространство родительского элемента
Flex-grow выделяет оставшееся пространство родительского элемента flex-grow Атрибут определяет, как распределяется оставшееся пространство, когда родительский элемент имеет оставшееся пространство в н.
CSS понимает, что div заполняет оставшуюся высоту и очень адаптивен
Используйте padding-top родительского элемента и margin-top заголовка div (отрицательный), чтобы добиться умной комбинации. Код выглядит следующим образом: HTML код: css код: .
CSS Div сильно заполнен оставшимся пространством родителя
Трансфер от: http://www.cnblogs.com/zhujl/Archive/2012/03/20/2408976.html 1. рендеринг для достижения: описывать: Как показано на рисунке выше, красная часть — фиксированная высота 100px, зеленая част.
Дочерние элементы автоматически заполняют родительский контейнер и автоматически переносят-отображают: grid
Много раз нам нужен этот макет Ширина родительского элемента изменяемого размера Количество дочерних элементов является неопределенным Дочерний элемент может автоматически заполнять родительский элеме.