Я работаю над пользовательской стартовой страницей. Моя цель - разместить несколько столбцов рядом с флексбоксом. Сами столбцы также являются флексбоксами и заполнены кружками, которые впоследствии станут ссылками.
Я пытаюсь добиться того, чтобы ограничить максимальную высоту стартовой страницы видимой областью экрана и поместить круги внутри Столбцы переносятся в верхнюю часть столбца, когда столбец достигает нижней части страницы.
Это работает, когда я устанавливаю фиксированную высоту для столбцов (например, 900 пикселей). Однако, когда я устанавливаю относительную высоту, элементы не переносятся, а переполняются по нижней части страницы, и появляется полоса прокрутки.
Как настроить код, чтобы содержимое было ограничено видимым экраном area?
Я довольно новичок в html, это мой первый настоящий проект, поэтому мой код может показаться немного странным в некоторых местах.
Это моя html разметка:
<body>
<div class="wrapper">
<div id="row1" class="fixedflex">This is the header</div>
<div id="row2" class="flexflex">
<div class="tilebox">
<div class="tilecolumn">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
<div class="tilecolumn">
<div class="tile"></div>
</div>
<div class="tilecolumn">
<div class="tile"></div>
</div>
</div>
</div>
<footer id="row3" class="fixedflex">Footer</footer>
</div>
</body>
И это часть css таблицы стилей
.wrapper {
/*
border-style: solid;
border-color: green;
border-width: 1px;
*/
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.fixedflex {
display: flex;
flex-direction: column;
flex-grow: 0;
flex-shrink: 0;
width: 100%;
border-style: solid;
border-color: white;
border-width: 1px;
}
.flexflex {
display: flex;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
flex: 2;
border-style: solid;
border-color: yellow;
border-width: 1px;
}
.tilebox {
border-style: solid;
border-color: red;
border-width:5px;
width: 80%;
height: 100%;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
flex-grow: 0;
flex-shrink: 0;
}
.tilecolumn {
display: flex;
flex-direction: column;
max-height: 100%;
justify-content: flex-start;
align-items: center;
align-content: center;
flex-wrap: wrap;
flex-basis: 20%;
flex-grow: 2;
flex-shrink: 2;
margin: 20px;
}
.tile {
display: flex;
margin: 10px;
width: 100px;
height: 100px;
color: var(--text_color);
text-decoration: none;
align-items: center;
text-align: center;
justify-content: center;
border-radius: 50%;
background: var(--light_background);
}
Я также использую нормализацию. css, но я не думаю, что что-то есть в там, что может вызвать мою проблему.