Растянуть высоту строки/столбца начальной загрузки 5.2.0 до нижней части страницы.CSS

Разбираемся в CSS
Ответить
Anonymous
 Растянуть высоту строки/столбца начальной загрузки 5.2.0 до нижней части страницы.

Сообщение Anonymous »

Я изо всех сил пытаюсь растянуть левый раздел навигации, чтобы он достиг нижней части страницы и оставался отзывчивым. Я использую Bootstrap 5.2.0. Я пробовал много решений, таких как h-100, flex-grow, min-vh-100m, самовыравнивание: растяжение. Кажется, ничего не помогает.
Codepen: (Возможно, вам придется увеличить высоту окна вывода, чтобы понять, что я имею в виду):
https://codepen.io/ma66ot/pen/KKQZXew
HTML





Изображение






Изображение












CSS
h2 {
width:100%;
}

html button {
border: 0;
width: 100%;
}

html ul {
list-style-type: none;
padding: 0;
margin: 0;
}

html .container-fluid {
padding: 1em;
}

#circle{
width: 100%;
height: 100%;
}

#verwaltung-logo {
width: 50%;
height: 50%;
}
html .links {
padding-right: 3em;
}

/* Navigation */
html .navigation {
background: #FFA500;
border-radius: 48px;
padding: 1em;
margin-top: 1em;
}

li {
margin-top: 1em;
margin-bottom: 1em;
}

.button-container{
width: 80%;
margin: auto;
}
.navigation a {
color: white;
text-decoration: none;
}

.mainfenster {
background: #FF6E13;
border-radius: 48px;
overflow-y: scroll;
height: calc(100vh - 2em);;
}

/* Hide scrollbar for Chrome */
.mainfenster::-webkit-scrollbar {
display: none;
}

.mainfenster {

/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */

}

.mainfenster button {
border-radius: 10px !important;
}


Подробнее здесь: https://stackoverflow.com/questions/724 ... om-of-page
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»