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那么多。

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 2

以下codepen（http://codepen.io/Kebten/pen/PqNVrW）有一个带有列表的侧边栏，该列表占用了可用的垂直空间 - 我假设这是您的问题点： - ）

添加背景颜色作为辅助。

<input type="checkbox" id="{{category}}" ng-checked="isCategory(category)" >

$scope.isCategory = function(category){
   return  $scope.asset[0].category.indexOf(category) >= 0;
}

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

CSS Flex全高侧边栏

2 个答案: