Боковая колонна не собирается на всю высоту

Question

Я создаю боковую панель для своего сайта и пытаюсь сделать так, чтобы она была остальной частью высоты страницы после элементов перед ней.Я не могу понять, как это сделать, хотя.Я использую bootstrap 4. Но проблема, вероятно, в моем CSS, который я опубликую сейчас.

.sidebar {
    float: left;
    width: 300px;
    height: 100%;
    background-color: #212529;
}
.wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    margin-top: -50px;
    margin-bottom: -30px;
}

#sidebar h1, h2, h3, h4, h5, h6 {
    color: #fff;
}

#sidebar {
    width: 250px;
    height: 100%;
    z-index: 0;
    background: #212529;
    transition: all 0.3s
}

#sidebar ul li a {
    color: #c3c3c3;
    padding: 10px;
    font-size: 1.1em;
    display: block;
    text-decoration: none;
}
#sidebar ul li a:hover {
    color: #7386D5;
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}
ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

Мой сайт, на котором возникла проблема, действительно работает: https://madewithloveandsarcasm.com/site/portfolio/

Вы можете найти все другие соответствующие коды там.но часть, которая меня действительно беспокоит, это боковая панель

Answer 1

Это больше из того, почему это происходит.

Как вы знаете, процентные значения зависят от родителя, если у родителя есть height:50px;, а у прямого потомка height:50% рост ребенка будет равен 25px, поскольку 50% из 50px равно 25px

Однако, если у родителя есть height:0, которое является значением по умолчанию, тогда height:100% будет равно 0, поскольку 100% из 0 is 0.

flexbox не устанавливает высоту родителя, он просто растягивает дочерние элементы, чтобы заполнить доступное пространство.

Высота вашей обертки определяетсяcontent, так что когда вы говорите height:100%, это следует за высотой содержимого (в среде flex), теперь содержимое здесь имеет значение nav#sidebar и main

main выше, поэтому высота родительского элемента будет равнаего высота, которая определяется его содержимым (может быть жестко задана или даже установлена ​​JS), flexbox будет растягивать других дочерних элементов, теперь установка height:100% для дочернего элемента означает высоту родительского элемента, как если бы этот дочерний элемент был единственнымтот, который существует, чтобы увидеть этот репереместите элемент main все вместе, тогда height:100% будет работать, удаление его работает, потому что, как я сказал ранее flexbox, растягивайте детей.

Answer 2

Вы можете удалить 100% из вашего .контейнера, чтобы исправить это.По-видимому, это заставило их переполнить родительский контейнер и не отрегулировать их по высоте.