html - CSS Flex 全高侧边栏

Question

我正在尝试制作带背景的侧边栏，其高度与 #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>

Answer 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>