Html CSS Flex全高侧边栏

我试图用背景制作边栏，边栏的高度和页面内容的高度相同，但我无法使它工作。侧边栏的高度仍然与其内容相同

以下是css代码：

.flexbox {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    overflow: hidden !important;
}
.flexbox .flexbox-col {
    flex: 1;
}


<div id="mainWrapper" class="main-grid clearfix flexbox">
   <div id="sidebar" class="opened left flexbox-col"></div> 
   <div id="page-content" class="page-content flexbox-col">
</div>

---

这些元素没有高度，除非你告诉它们有高度，除非有内容

如果希望元素具有100%的高度，请将其添加到CSS中

而且，你真的不应该使用！这么重要

* { 保证金：0； 填充：0； } 身体 html{ 身高：100%； } .flexbox{ 显示：-webkit flex； 显示：-ms flexbox，显示：flex； 溢出：隐藏； 身高：100%； } .flexbox.flexbox col{ 身高：100%； 弹性：1； } 边栏{ 背景：f00； } 页面内容{ 背景：bada55； }

---

这些元素没有高度，除非你告诉它们有高度，除非有内容

如果希望元素具有100%的高度，请将其添加到CSS中

而且，你真的不应该使用！这么重要

* { 保证金：0； 填充：0； } 身体 html{ 身高：100%； } .flexbox{ 显示：-webkit flex； 显示：-ms flexbox，显示：flex； 溢出：隐藏； 身高：100%； } .flexbox.flexbox col{ 身高：100%； 弹性：1； } 边栏{ 背景：f00； } 页面内容{ 背景：bada55； } 下面的代码笔有一个侧边栏，其中的列表占据了可用的垂直空间-我假设这就是您的问题所在：-

作为辅助添加的背景色

<div id="mainWrapper" class="main-grid clearfix flexbox">
    <div id="sidebar" class="opened left flexbox-col">
        <ul>
            <li>sidebar</li>
            <li>sidebar</li>
            <li>sidebar</li>
            <li>sidebar</li>
            <li>sidebar</li>
       </ul>
    </div>
    <div id="page-content" class="page-content flexbox-col">
        <ul>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
        </ul>
    </div>
</div>

#sidebar {
    background-color: pink;
}
#page-content {
    background-color: green;
}
.flexbox {
    display: flex;
}
.flexbox .flexbox-col {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#sidebar ul {
    background-color: red;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
#sidebar ul li {
    flex-grow: 1;
}
#page-content ul {
    background-color: yellow;
}

HTML似乎缺少一个div，但似乎没有影响结果。

下面的代码笔有一个侧栏，其中的列表占据了可用的垂直空间-我假设这就是您的问题所在：-

作为辅助添加的背景色

<div id="mainWrapper" class="main-grid clearfix flexbox">
    <div id="sidebar" class="opened left flexbox-col">
        <ul>
            <li>sidebar</li>
            <li>sidebar</li>
            <li>sidebar</li>
            <li>sidebar</li>
            <li>sidebar</li>
       </ul>
    </div>
    <div id="page-content" class="page-content flexbox-col">
        <ul>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
        </ul>
    </div>
</div>

#sidebar {
    background-color: pink;
}
#page-content {
    background-color: green;
}
.flexbox {
    display: flex;
}
.flexbox .flexbox-col {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#sidebar ul {
    background-color: red;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
#sidebar ul li {
    flex-grow: 1;
}
#page-content ul {
    background-color: yellow;
}

---

HTML似乎缺少一个div，但似乎不会影响结果。

谢谢，@Paulie\u D！重要的是，我使用了display:flex，因为我不确定display:flex是否被覆盖。无论如何，我试着使用你的代码，边栏仍然有它自己的高度：/你想把.flexbox设置为最小高度：100%；身高不是100%。这样，如果页面内容中的内容大于屏幕，侧边栏仍将占据所有垂直空间。谢谢，@Paulie_D！重要的是，我使用了display:flex，因为我不确定display:flex是否被覆盖。无论如何，我试着使用你的代码，边栏仍然有它自己的高度：/你想把.flexbox设置为最小高度：100%；身高不是100%。这样，如果页面内容中的内容大于屏幕，侧边栏仍将占据所有垂直空间！重要信息可以是工具箱中的有用工具。如果您使用ITCSS构建样式表，那么.flexbox类可以很好地与相关的：FWIW-I-feel！重要信息可以是工具箱中的有用工具。如果您正在使用ITCSS构建样式表，那么.flexbox类可以很好地与