Question

我正在为我的网站构建侧边栏，并试图将其保留为页面上方其余元素之后的其余高度。我不知道该怎么做。我正在使用bootstrap4。但是问题可能出在我的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

您可以从.container中删除100％进行修复。显然，这使他们溢出了其父容器，并且没有调整高度。

Answer 2

这更多是为什么发生这种情况的原因。

您知道百分比值取决于父级，如果父级说height:50px; 并且直系孩子的height:50%的身高将等于25px，因为50%中的50px是25px

但是，如果父级具有默认值height:0，则height:100%将等于0，因为100%中的0是0

flexbox并没有设置父级的高度，只是使子级拉伸以填充可用空间。

您的包装器的高度由内容决定，因此当您说height:100%时，它遵循内容的高度（在Flex环境中），现在这里的内容是nav#sidebar和{{1} }

main较高，因此父级的高度将等于其内容定义的高度（可以用硬编码或由JS设置），main将拉伸其他子级，现在设置flexbox在子项上表示父项的高度，就好像该子项是唯一存在的子项一样，要看到将其全部删除height:100%元素，则main将起作用，将其删除，因为就像我之前所说height:100%确实可以拉紧孩子们。

侧柱未达到整个高度

2 个答案: