Закрепить нижнюю часть div в нижней части экрана
Дано...
<html>
<body>
<div id = "row1">...</div>
<div id = "row2" style = "overflow-y: scroll;">...</div>
</body>
</html>
Учитывая, что содержимое row2 выше, чем оставшееся вертикальное пространство, как мне закрепить нижнюю часть row2 в нижней части окна просмотра, чтобы div прокручивался для отображения содержимого?
Высота row1 зависит от его содержимого.
Немного сбивает с толку, что именно вам нужно, но, похоже, это можно решить с помощью flexbox. Вот полезный ресурс.
flexbox не работает, потому что, похоже, не ограничивает div по вертикали. Как правило, кажется, что HTML растягивает блоки div по вертикали настолько, насколько они должны быть, если только им не указана явная высота или края не закреплены с использованием абсолютного позиционирования.
Может ли решение javascript работать с тем же?
Да, это то, что я собираюсь использовать.
Ответы 1
body{
width:100%;
height:100%;
margin: 0 auto;
}
row1{
position:relative;
max-height:50%;
height:100%;
}
row2{
position:fixed;
max-height:50%;
height:100%;
overflow-y:scroll;
}<html>
<body>
<div id = "row1">...</div>
<div id = "row2" style = "overflow-y: scroll;">...</div>
</body>
</html>50% - это не то, сколько осталось места.
Вы даете ответ или задаете вопрос? Это должен был быть комментарий к вопросу.
Рад, что на этот раз беда не у меня.
Что вы уже пробовали?