Как автоматически настроить HTML-DIV в нижней части веб-страницы?

#html #positioning

#HTML #позиционирование

Вопрос:

Я изо всех сил пытаюсь автоматически настроить HTML DIV до нижней части страницы:

 <div style='position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; font-size:10vmin; background:orange'>

  <header style="display:flex; justify-content:center; align-items:center; height:26px; font:11px/24px Arial; border:none; color:#2E3F58; background:#B1DBFF 0% 0% no-repeat padding-box;">Header 1</header>

  <button type="button" style="display:inline-flex; align-items:center; font:11px/24px Arial; border:none; color:black; background:none; cursor:pointer; outline:0 !important">Header 2</button>

  <table style="height:26px; width:100%; color:#FFF; background:red"></table>

  <div id="content" style="text-align:center; color:silver; font-size:10vmin; top:0; bottom:0; left:0; right:0; background:green">content</div>

</div>

Развернуть фрагмент

https://jsfiddle.net/0nx9zbmt/

Это та часть, которая не настраивается до нижней части, как я хотел бы сделать, поэтому вся нижняя часть веб-страницы становится зеленой:

 <div id="content" style="text-align:center; color:silver; font-size:10vmin; top:0; bottom:0; left:0; right:0; background:green">content</div>

Есть идеи? Я новичок в модели flex box и не могу использовать ее должным образом.

Ответ №1:

Использовать height: 100%; для содержимого div

 <div id="content" style="height: 100%; text-align:center; color:silver; font-size:10vmin; top:0; bottom:0; left:0; right:0; background:green">content</div>

Примечание: попробуйте использовать CSS классы вместо встроенных CSS , чтобы это выглядело чище и было легко понять код.

также top:0; bottom:0; left:0; right:0; не будет иметь эффекта без свойства position.

1. Спасибо, но тогда я получаю полосу прокрутки с правой стороны, которая не предназначена.

2. затем вам нужно уменьшить высоту заголовка 1 заголовка 2 и красного раздела (таблицы) следующим образом: height: calc(100% — 90 пикселей); установите для этого значение содержимого div вместо 100%

Ответ №2:

Если вам нужно настроить положение элемента, вы должны добавить position: relative; position: absolute; или position: fixed; к стилям элемента. В противном случае ваши top значения , bottom , left и right будут проигнорированы.

В вашем случае. Вы можете добавить position: absolute; , потому что вы задаете ему абсолютную позицию. Также вам нужно удалить это top: 0; , потому что вы не устанавливаете никакого значения top . Вам просто нужно, чтобы он был внизу.

Итак, это ваш окончательный код.

 <div style='position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; font-size:10vmin; background:orange'>

<header style="display:flex; justify-content:center; align-items:center; height:26px; font:11px/24px Arial; border:none; color:#2E3F58; background:#B1DBFF 0% 0% no-repeat padding-box;">Header 1</header>

<button type="button" style="display:inline-flex; align-items:center; font:11px/24px Arial; border:none; color:black; background:none; cursor:pointer; outline:0 !important">Header 2</button>

<table style="height:26px; width:100%; color:#FFF; background:red"></table>

<div id="content" style="text-align:center; color:silver; font-size:10vmin; position: absolute; bottom:0; left:0; right:0; background:green;">content</div>

</div>

Развернуть фрагмент

Подробнее о css position : https://www.w3schools.com/css/css_positioning.asp

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

2. Извините, вам нужно добавить width: 100% и избавиться от всего позиционирования. Таким образом, зеленый элемент получит все оставшееся пространство.