CSS Flex 全高侧边栏答案

【问题标题】：CSS Flex full height sidebarCSS Flex 全高侧边栏
【发布时间】：2015-03-22 11:00:54
【问题描述】：

我正在尝试制作带有背景的侧边栏，其高度与 #page-content 的高度相同，但我无法使其工作。侧边栏高度仍然与其内容相同。

这是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>

【问题讨论】：

相关：stackoverflow.com/questions/28998490/…
FWIW 我觉得!important 可以成为工具箱中有用的工具。如果你用 ITCSS 构建你的样式表，你的 .flexbox 类很适合 "trumps" category

标签： html css flexbox

【解决方案1】：

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

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

另外，你真的不应该这么频繁地使用!important。

* {
  margin: 0;
  padding: 0;
}
body,
html {
  height: 100%;
}
.flexbox {
  display: -webkit-flex;
  display: -ms-flexbox, display: flex;
  overflow: hidden;
  height: 100%;
}
.flexbox .flexbox-col {
  height: 100%;
  flex: 1;
}
#sidebar {
  background: #f00;
}
#page-content {
  background: #bada55;
}

<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>
</div>

【讨论】：

谢谢你，@Paulie_D。 !important 我使用了，因为我不确定是否 display: flex 没有被覆盖。无论如何，我尝试使用您的代码，侧边栏仍然有它自己的高度：/
你想将 .flexbox 设置为 min-height: 100%;不是身高 100%。这样，如果 page-content 中的内容大于屏幕，侧边栏仍将占据所有垂直空间。

【解决方案2】：

下面的 codepen (http://codepen.io/Kebten/pen/PqNVrW) 有一个带有列表的侧边栏，该列表占用了可用的垂直空间 - 我假设这是你问题的重点:-)

添加背景颜色作为辅助。

<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，但似乎不影响结果。

【讨论】：