Css Высота контейнера
Мне понадобится помощь для шаблона моего веб-сайта. Я потерялся с высотами CSS и тем, как они сделаны.
Чтобы лучше понять мою проблему, я создал codepen, где можно простым способом визуализировать мою проблему ссылка
* {
margin: 0;
}
.container {
height: 100vh;
background: red;
width: 100wh;
over-flow: hidden;
padding: 1.25rem;
box-sizing: border-box;
}
.container2 {
border: 2px solid black;
height: 100%;
background-color: blue;
}
.boxtop {
with: auto;
height: 20px;
background-color: pink;
}
.gridcontainer {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
height: 100%;
}
.box {
grid-column: span 4 / span 4;
background-color: yellow;
height: 100%;
}<div class = "container">
<div class = "container2">
<div class = "boxtop"></div>
<div class = "gridcontainer">
<div class = "box">d</div>
<div class = "box">d</div>
</div>
</div>
</div>В этой ссылке вы увидите, что желтая часть проходит далеко, и я хочу, чтобы она остановилась в конце синей части.
Каждая коробка должна иметь высоту container2 - boxtop
Спасибо за вашу помощь.
Ответы 4
Чтобы исправить это обновление box высоту до этой height: calc(100% - 20px);. Кроме того, with и over-flow являются недопустимыми свойствами CSS. wh — недопустимая единица CSS. Обновите его до overflow: hidden;
* {
margin: 0;
}
.container {
height: 100vh;
background: red;
width: 100vw;
overflow: hidden;
padding: 1.25rem;
box-sizing: border-box;
}
.container2 {
border: 2px solid black;
height: 100%;
background-color: blue;
}
.boxtop {
height: 20px;
background-color: pink;
}
.gridcontainer {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
height: 100%;
}
.box {
grid-column: span 4 / span 4;
background-color: yellow;
height: calc(100% - 20px);
}<div class = "container">
<div class = "container2">
<div class = "boxtop"></div>
<div class = "gridcontainer">
<div class = "box">d</div>
<div class = "box">d</div>
</div>
</div>
</div>over-flow: ? ты имеешь в виду overflow?
with: auto; ? Что такое with?
Удалить высоту: 100%; из .box, так как это вызывало выход желтого поля за пределы контейнера сетки, и зафиксируйте его на этой высоте: calc (100% - 20px).
Да, with и over-flow являются недопустимыми свойствами css. Я обновил код с правильными свойствами CSS. @RokoC.Buljan
Что такое wh в width: 100wh;?
Должна быть ширина: 100vw; не чт @RokoC.Buljan
Проблема заключается в расчете высоты желтого прямоугольника внутри контейнера сетки. Вот обновленный код для решения проблемы:
* {
margin: 0;
}
.container {
height: 100vh;
background: red;
width: 100vw;
overflow: hidden;
padding: 1.25rem;
box-sizing: border-box;
}
.container2 {
border: 2px solid black;
height: 100%;
background-color: blue;
display: flex;
flex-direction: column;
}
.boxtop {
width: auto;
height: 20px;
background-color: pink;
}
.gridcontainer {
flex: 1;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.box {
grid-column: span 4 / span 4;
background-color: yellow;
}<div class = "container">
<div class = "container2">
<div class = "boxtop"></div>
<div class = "gridcontainer">
<div class = "box">d</div>
<div class = "box">d</div>
</div>
</div>
</div>- В CSS для
.container2я добавилdisplay: flex;иflex-direction: column;, чтобы убедиться, что контейнер расширяется по вертикали, чтобы соответствовать высоте его родительского контейнера. - В CSS для
.gridcontainerя добавилflex: 1;. Это позволяет контейнеру сетки расширяться и занимать оставшееся вертикальное пространство внутри.container2. - Удален
height: 100%;из.box, так как он заставлял желтую рамку расширяться за пределы предполагаемых пределов.
width: 100wh; что такое wh?
Во-первых, некоторые опечатки: wh — недопустимая единица измерения, with — не width, over-flow должно быть overflow
- используйте CSS
flex - вам не обязательно нужен
20px height, если у вас будет контент в.boxtop. Пусть flex рассчитает для вас необходимые места - используйте единицу
dvhдля динамической высоты области просмотра
* { margin: 0; box-sizing: border-box; }
.container {
height: 100dvh;
display: flex;
background: red;
}
.container2 {
flex: 1;
display: flex;
flex-direction: column;
margin: 1.25rem;
border: 2px solid black;
background-color: blue;
}
.boxtop {
background-color: pink;
}
.gridcontainer {
flex: 1;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.box {
grid-column: span 4 / span 4;
background-color: yellow;
}<div class = "container">
<div class = "container2">
<div class = "boxtop">top</div>
<div class = "gridcontainer">
<div class = "box">box 1</div>
<div class = "box">box 2</div>
</div>
</div>
</div>Вам нужно будет правильно подобрать юниты, чтобы они были совместимы друг с другом. Например, в исходном коде вы установили высоту контейнера в единицах vh, padding в единицах rem, boxtop в единицах px и высоту коробки в единицах %. Это не поможет вам сделать расчеты, необходимые для визуализации размеров элементов. Если бы вместо этого вы измерили все вышеперечисленное в единицах vh, вы могли бы сделать что-то вроде этого:
*{
margin:0;
}
.container{
height: 100vh;
background:red;
width:100%;
overflow:hidden;
padding:5vh;
box-sizing:border-box;
}
.container2{
border:2px solid black;
height:100%;
background-color:blue;
}
.boxtop{
width:auto;
height:5vh;
background-color:pink;
}
.gridcontainer{
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
height:100%;
}
.box{
grid-column: span 4 / span 4;
background-color:yellow;
height: 85vh;
}<div class = "container">
<div class = "container2">
<div class = "boxtop"></div>
<div class = "gridcontainer">
<div class = "box">d</div>
<div class = "box">d</div>
</div>
</div>
</div>Здесь я сохранил общую высоту как 100vh, отступы сверху и снизу я применил по 5vh каждый, а высота boxtop равна 5vh. Таким образом, высота коробки, чтобы соответствовать сетке, должна быть (100-5-5-5)vh или 85vh. Это также должно реагировать, если вы изменяете размер окна, потому что все элементы используют одну и ту же вертикальную единицу высоты. Надеюсь это поможет.
withиover-flowявляются недопустимыми свойствами CSS.