Макет сетки css - высота строк никогда не работает
Я хочу использовать проценты в моем CSS для моего приложения для реагирования, но это вызывает такую головную боль. Ширина% всегда работает фантастически, но высота% всегда является проблемой. Похоже, я ДОЛЖЕН указать высоту в пикселях, чтобы он работал, если элемент не содержит дочерних элементов.
Я упускаю здесь что-то фундаментальное. Будет ли div не устанавливать для себя 100% оставшейся высоты без дочерних элементов. Приведенный ниже код не работает, несмотря на то, что я установил свойство align-items на stretch.
.search-container{
display: grid;
grid-template-columns: auto 900px 300px auto;
grid-template-rows: 30% auto auto;
grid-gap: 20px;
}
.promo-container {
background-color:blue;
grid-column-start: 2;
grid-column-end: 3;
align-items: stretch;
}
.form-container {
background-color:blue;
grid-column-start: 3;
grid-column-end: 4;
align-items: stretch;
}
.results-header {
background-color:rgb(255, 94, 0);
grid-column-start: 2;
grid-column-end: 4;
height: 90px;
}
.refine-search {
background-color:blue;
grid-column-start: 2;
grid-column-end: 3;
height: 100%;
}
.results-container{
background-color:rgb(0, 255, 42);
grid-column-start: 2;
grid-column-end: 3;
}<div className = "search-container">
<div className = "promo-container">
</div>
<div className = "form-container">
</div>
<div className = "results-header">
</div>
<div className = "refine-search">
</div>
<div className = "results-container">
</div>
</div>Я думаю, что здесь я совершенно ошибаюсь, я настолько привык использовать flex в react native, что не делаю именно того, что вы только что сказали. Итак, я предполагаю, что мне нужно установить корневой элемент на 100vh, чтобы это работало?
или используйте 30vh в качестве значения для первой строки;)
Ответы 2
Вам нужно установить высоту ваших родительских элементов.
html, body, div {
height: 100%;
width: 100%;
}
Проблема с ростом в том, что вам нужно иметь детей, чтобы работать. Поэтому, если вы хотите увидеть пустое пространство, где должны быть дочерние элементы (остальные элементы), вам действительно нужно установить пиксели, rem, fr и т. д. В противном случае сетка не позволит пустому пространству быть там, если там ничего нет. Например, если я хочу увидеть оставшееся место, я могу сказать:
`.someClass {
display: grid;
/* I'm setting the rows to be 3 row with a given space of 1 fr
each row will be placed with given space unit */
grid-templates-rows: repeat(3, 1fr);
grid-template-columns: repeat(5, 1fr);
}`
В противном случае, если вы хотите создать сетку автоматически в зависимости от доступного пространства, вы можете установить все автоматически следующим образом:
.someotherClass {
display: grid;
/* grid template areas is the combination of the template rows and columns */
grid-templates-areas: auto;
}
Конечно, с auto я все еще могу заказывать свои элементы в строках и столбцах, которые мне нужны, но пространство будет корректироваться соответствующим образом с каждым элементом.
Чтобы дать вам некоторое представление о том, как работает сетка, посетите эту страницу: https://cssgridgarden.com/
Надеюсь помогает :)
30% какой родительской ссылки? если нет, то 30% равно нулю. установить высоту для прямого родителя или использовать единицы измерения как vh, px или другие, которые не требуют вычисления на высоте родительского элемента, установленной в CSS