Я хочу сделать div внизу экрана.
В качестве решения я подумал об объявлении указанного div (в примере «div2») с расширением height:100%;
.
У меня не работает, я видел людей, говорящих, что решение этой проблемы — объявить файлы html, body {height=100%;}
.
Это все еще не работает для меня, как показано во фрагменте ниже.
Еще одна вещь, которую я пробовал, это объявление height:100vh;
. Но это неверно, так как наличие «div1» вызывает переполнение, и я просто хочу, чтобы он заполнил экран.
html, body{
height:100%
margin 0;
}
#div1{
height:80px;
width: 100%;
background-color: red;
display:flex;
justify-content: center;
align-items: center;
}
#div2{
height:100%;
width: 100%;
background-color: green;
}
<div id="div1"> Contenido del div 1 </div>
<div id="div2"> Contenido del div 2. Este div quiero que ocupe hasta el final de la pantalla de manera vertical. </div>
Здоровье!
Вы можете сделать это с помощью
javascript
свойстваscreen.heigth
, которое берет общую высоту экрана, на котором вы находитесь, и добавляет ее к нему через переменную. Это будет что-то вроде этого:Это займет высоту любого экрана, на котором отображается ваша страница или приложение.
поместите
display:flex
в свое тело и добавьте ,flex-direction:column
чтобы взять 100% длины по вертикалиУ вас также была синтаксическая ошибка в высоте и марже в селекторе html, body
Как показано ниже, результат, который вы ожидаете
посмотрите здесь пример
Для достижения желаемого эффекта вы можете объявить тело как
display: flex
и то, что оно занимает всю высоту экрана в дополнение к тому, что его адрес является столбцомflex-direction: column
, div, который вы хотите занять остальную часть пространства, мы объявляемflex: 1
, что это эквивалентноflex-grow: 1
В основной контейнер добавьте
min-height 100vh
для установки
div
width
на 100vw,Div
высоты на 100vh (далее приведено краткое описание vw и vh).После этого, если вы хотите применить Reset.
Добавьте в класс
#div2
position: fixed;
это должно работать, если что скажите.