Использование flexbox и 100% высоты
Я использую flexbox и пытаюсь получить шесть div, чтобы занять оставшуюся высоту страницы. У меня есть две проблемы:
- У меня возникли проблемы с тем, чтобы шесть блоков занимали оставшуюся часть высоты, но не более того.
- У меня белое поле вверху страницы
Мой код выглядит так:
<!DOCTYPE html>
<html>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
h2 {
text-align: center;
}
#all {
background-color: red;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#main {
display: flex;
width: 80%;
margin: 10px auto;
height: 100%;
}
.category {
border: solid black 2px;
flex: 1;
flex-grow: 1;
margin: 0px 20px;
height: 100%;
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
</style>
<div id = "all">
<h2>My page</h2>
<div id = "main">
<div class = "category">Category 1</div>
<div class = "category">Category 2</div>
<div class = "category">Category 3</div>
<div class = "category">Category 4</div>
<div class = "category">Category 5</div>
<div class = "category">Category 6</div>
</div>
</div>
</html>
Я пробовал использовать различные стили, такие как flex-grow, stretch и высотой 100% по телу. Однако ни один из них, похоже, не помогает. Что я делаю неправильно?
Хм, кажется, вы правы, но почему это так, когда h2 содержится внутри div? Кажется, что поле h2 появляется за пределами div. Также кажется, что останется крошечный запас, если я удалю div.
Вот как работают поля.
Итак, вы говорите, что поля дочерних объектов появляются вне родительского div, в котором они содержатся?
Они влияют на положение родительского элемента.
Ответы 2
Я пришел к следующему решению. Для этого требуется дважды использовать display: flex и настроить отображение h2 как flex: 0, а остальное - как flex: 1.
<!DOCTYPE html>
<html>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#all {
background-color: red;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
h2 {
flex: 0;
text-align: center;
}
#main {
display: flex;
flex: 1;
flex-direction: row;
width: 80%;
margin: 10px auto;
height: 100%;
}
.category {
border: solid black 2px;
flex: 1;
margin: 0px 20px;
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
</style>
<div id = "all">
<h2>My page</h2>
<div id = "main">
<div class = "category">Category 1</div>
<div class = "category">Category 2</div>
<div class = "category">Category 3</div>
<div class = "category">Category 4</div>
<div class = "category">Category 5</div>
<div class = "category">Category 6</div>
</div>
</div>
</html>
Белое пространство вверху, вызванное полями по умолчанию, вы удалите их с помощью
*{
margin:0;
}
Тот, что внизу, вызванный высотой: 100%; в главном контейнере видно, что дисплей гибкий, он будет высотой 100% от высоты окна просмотра, но, поскольку происходит нажатие h1, выталкивается #main, поэтому дочерние элементы с высотой 100% также выталкиваются, вы можете либо удалить height 100% от #all или удалите h1.
Я удалил высоту 100% из #id, потому что высота элемента должна определяться его содержимым.
*{
margin:0;
box-sizing:border-box;
}
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
h2 {
text-align: center;
}
#all {
background-color: red;
width: 100%;
/* height: 100%; */
margin: 0px;
padding: 0px;
}
#main {
display: flex;
width: 80%;
margin: 10px auto;
height: 100%;
}
.category {
border: solid black 2px;
flex: 1;
flex-grow: 1;
margin: 0px 20px;
height: 100%;
text-align: center;
font-size: 1.2em;
font-weight: bold;
}<div id = "all">
<h2>My page</h2>
<div id = "main">
<div class = "category">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class = "category">Category 2</div>
<div class = "category">Category 3</div>
<div class = "category">Category 4</div>
<div class = "category">Category 5</div>
<div class = "category">Category 6</div>
</div>
</div>Вы можете заметить небольшое белое пространство внизу, это связано с вашим полем в 20 пикселей, которое я не удалил, что на самом деле не обязательно
Хорошее решение. Вы также можете разместить на своем сайте ссылку на эту таблицу стилей «сброса». Есть много других. reset.css
Глядя на фрагмент кода, поля не заполняются до нижней части окна браузера, что мне и нужно. Я опубликовал другое решение, которое, похоже, работает.
О, вы хотели, чтобы поля заполняли окно даже пустым, ну, вы не указали на это, вопрос был о пустых местах.
@ZohirSalakCeNa Я почти уверен, что это было указано несколько раз в моем вопросе, включая первое предложение и второй маркер. Пробел упоминался только в первом пункте.
О, извините, я полагаю, что мой ответ отвечает только на половину вашего вопроса, однако он был бы полезен для кого-то с этой конкретной проблемой. :)
Белое пространство вверху вызвано полем на
h2.