Заполнить весь вид страницы с помощью CSS / Flexbox
Высота меня до сих пор смущает и когда и куда ее ставить.
https://jsfiddle.net/3pxmm0mz/
<div id = "app">
<div className = "wrapper">
<header>Header</header>
<nav>
Nav
</nav>
<div className = "main-wrapper">
<main>
main
</main>
<footer>
footer
</footer>
</div>
</div>
</div>
body,
html {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-wrap: wrap;
header {
background: red;
flex: 0 0 100%;
}
nav {
background: blue;
flex: 0 0 5%;
}
.main-wrapper {
background: gray;
display: flex;
flex: 0 0 95%;
flex-wrap: wrap;
main {
background: yellow;
flex: 0 0 100%;
}
footer {
background: darkorange;
flex: 0 0 100%;
}
}
}
Я пытаюсь добиться того, чтобы все области заполняли весь экран (без полос прокрутки).
Я бы хотел, чтобы заголовок был максимум-25%. Нижний колонтитул, вероятно, 25% (хотя я все еще не уверен, хочу ли я, чтобы нижний колонтитул всегда отображался).
Если навигация и, возможно, основное содержимое должны иметь полосы прокрутки, когда содержимое превышает размер экрана.
Ответы 3
https://jsfiddle.net/3pxmm0mz/1/
body,
html {
height: 100vh;
margin: 0;
}
.wrapper {
display: flex;
flex-wrap: wrap;
header {
background: red;
flex: 0 0 100%;
height: 100px;
}
nav {
background: blue;
flex: 0 0 5%;
}
.main-wrapper {
background: gray;
display: flex;
flex: 0 0 95%;
flex-wrap: wrap;
main {
background: yellow;
flex: 0 0 100%;
min-height: calc(100vh - 200px);
overflow: auto;
}
}
footer {
background: darkorange;
flex: 0 0 100%;
height: 100px;
}
}<div id = "app">
<div class = "wrapper">
<header>Header</header>
<nav>
Nav
</nav>
<div class = "main-wrapper">
<main>
main
</main>
</div>
<footer>
footer
</footer>
</div>
</div>Вы можете настроить calc (), чтобы вычесть процент или фиксированное количество пикселей в зависимости от того, что вы хотите.
Откуда берется 200 пикселей?
Также я вижу, что у вас переполнение в основной области, но как насчет области навигации?
заголовок 100 пикселей + нижний колонтитул 100 пикселей = 200 пикселей С помощью функции calc () я вычитаю высоту заголовка + нижнего колонтитула.
Вы действительно можете избавиться от переполнения. Я попробовал удалить его, и вы получили красивый свиток в теле, который более аккуратный.
Я должен проверить это сам, но я вижу, что навигационная система не справляется с этим. Экран будет расширяться, чтобы освободить место для всего, что я добавлю к нему.
Хм, прокрутки даже в теле не вижу. jsfiddle.net/8pjx71ty
почему бы не передать этот 100vh детям и установить высоту в процентах по своему усмотрению.
body, html {
height: 100vh;
margin: 0;
}
.wrapper {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
header {
background: red;
flex: 0 0 100%;
max-height:25%;
height:25%;
}
nav {
background: blue;
flex: 0 0 5%;
height:75%;
}
.main-wrapper {
background: gray;
display: flex;
flex: 0 0 95%;
flex-wrap: wrap;
height:75%;
}
main {
background: yellow;
flex: 0 0 100%;
height:75%;
overflow-y: auto;
}
footer {
background: darkorange;
flex: 0 0 100%;
height:25%;
max-height:25%;
}<div id = "app">
<div class = "wrapper">
<header>Header</header>
<nav>
Nav
</nav>
<div class = "main-wrapper">
<main>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
</main>
<footer>
footer
</footer>
</div>
</div>
</div>Первоначально я пытался пойти по этому пути, но по какой-то причине мне было трудно правильно установить%, и это выглядело неправильно.
с процентами будет странно иметь дело, потому что ваш нижний колонтитул не имеет того же родителя, что и ваш верхний колонтитул.
Ах, это может быть так, да, я все еще не уверен, как будет идти нижний колонтитул, будет ли он снаружи с заголовком или больше внутри с основной областью.
Макет сетки действительно многообещающий для того, чего вы пытаетесь достичь.
Я знаю, что тебе не нужно меня убеждать. Я большой сторонник этого, но в настоящее время это не жизнеспособный вариант.
Я вижу, что вы используете CSS Flexboxflex и flex-wrap для создания полноэкранного двухмерного макета, но модуль flexbox - это фундаментально предназначенный, чтобы управлять отображением конкретных дискретных элементов на странице здесь и там по всей странице.
В идеале в этой настройке вы можете - и, возможно, должны - использовать CSS-сетка.
Это даст вам всевозможную гибкость, не говоря уже о простота, к которой у вас не будет доступа через flexbox.
Рабочий пример:
#app {
display: grid;
grid-template-rows: 25% 50% 25%;
grid-template-columns: 10% 90%;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
header {
grid-area: 1 / 1 / 2 / 3;
background-color: red;
}
nav {
grid-area: 2 / 1 / 3 / 2;
background-color: blue;
}
main {
grid-area: 2 / 2 / 3 / 3;
background-color: yellow;
}
footer {
grid-area: 3 / 1 / 4 / 3;
background-color: darkorange;
}<div id = "app">
<header>Header</header>
<nav>Nav</nav>
<main>main</main>
<footer>footer</footer>
</div>Я бы хотел использовать сетку, но с 40% пользователей, использующих сайт, используют IE 11, это невозможно без написания альтернативного варианта с использованием фреймворка или чего-то еще.
Справедливо. Я понимаю, что это исключает использование CSS Grid.
Да, я был очень разочарован тем, что, поскольку я действительно хотел его использовать, он, вероятно, значительно упростил бы мою жизнь, но число было слишком велико, и работа над ним сейчас - это слишком много работы и слишком сильно увеличит масштаб.
так как ваш html и тело имеют общие 100vh, вы можете передать высоту детям, используя
height 100%наdiv#appиdiv.wrapper, оттуда вы можете установитьheight:25%в заголовке и так далее.