CSS Fill Div Высота страницы
Мне нужно div bottom, чтобы заполнить оставшуюся высоту СТРАНИЦЫ, а не родительский div
body, html {
margin: 0px;
}
.top {
background-color: green;
width: 100px;
height: 50px;
}
.bottom {
background-color: red;
width: 100px;
height: 100%;
}<div class = "top"></div>
<div class = "bottom"></div>когда вы пишете свой вопрос, вы получаете этот вопрос как ПЕРВЫЙ связанный вопрос ... так что хорошо подумать о соответствующем вопросе, прежде чем размещать свой вопрос
@Temani, связанный с этим вопросом, использует родительский div, гибкий контейнер. Но я указал в своем вопросе, что хочу решить решение без родительского div. Разве это не нормально?
вы должны прочитать весь ответ;) не только принятый .. и, как сторона, у вас нет родительского контейнера здесь, и он называется телом
@Temani Хорошо, но я не могу использовать тело. Это для угловой программы с несколькими компонентами
Ответы 2
Вы можете использовать calc с vh для вычисления 100% высоты страницы за вычетом 50px из top DIV.
Взгляните на этот фрагмент:
body, html {
margin: 0px;
}
.top {
background-color: green;
width: 100px;
height: 50px;
}
.bottom {
background-color: red;
width: 100px;
height: calc(100vh - 50px);
}<div class = "top"></div>
<div class = "bottom"></div>Да, похоже, это так! Спасибо :)
вы можете попробовать приведенный ниже код, но будьте осторожны, его CSS3 может не полностью поддерживаться. См. https://caniuse.com/#search=calc
Альтернатива: с Javascript будет поддерживаться любой "нормальный" браузер, b
body, html {
height: 100%;
margin: 0px;
}
.top {
background-color: green;
width: 100px;
height: 50px;
}
.bottom {
background-color: red;
width: 100px;
height: 100%;
height: -webkit-calc(100% - 50px);
height: calc(100% - 50px);
}<div class = "top"></div>
<div class = "bottom"></div>какой смысл повторять один и тот же ответ?
Переместите
min-heightвниз,height:100%не будет работать