css - 侧柱未达到整个高度

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;并且直接 child 有 height:50% child 的高度将等于 25px 因为 50px 的 50% 是 25px

但是，如果父项的默认值是 height:0，则 height:100% 将等于 0，因为 0 的 100% 是 0。

flexbox 不设置父级的高度，它只是让子级拉伸(stretch)以填充可用空间。

包装器的高度由内容定义，所以当您说 height:100% 时，它跟随内容的高度(在 flex 环境中)，现在这里的内容是 nav #sidebar 和 main

main 更高，所以父级的高度将等于由其内容定义的高度(可以是硬编码甚至由 JS 设置)，flexbox 将拉伸(stretch)其他子级，现在设置 height:100% 对一个 child 意味着 parent 的高度，就好像那个 child 是唯一存在的，看到这个删除 main 元素一起然后 height :100% 会起作用，删除它会起作用，因为就像我之前说的那样 flexbox 会拉伸(stretch) child 。