Flex侧边栏：如何增长到100％的高度

Question

我正在使用CSS flex构建侧边栏，我需要它垂直增长以填充整个屏幕的垂直高度。这是我正在做的事情的骨架。

JSFiddle here

System.DateTime time = date.AddTicks(-406014993266);

Answer 1

我认为通过将完整的视口高度分配给容器，然后从flex: 1个孩子中移除.content，我得到了非常接近的结果。

.app {
  display: flex;
  flex-direction: row;
  . align-items: flex-start;
  height: 100vh;
  width: 100%;
}

.sidebar {
  background-color: red;
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.content-header {
  background-color: grey;
}

.content-main {
  background-color: yellow;
}

<div class='app'>
  <div class='sidebar'>
    This is sidebar
  </div>
  <div class='content'>
    <div class='content-header'>
      Content Header
    </div>
    <div class='content-main'>
      This is the main content
    </div>
  </div>
</div>

Answer 2

body, html {
  height: 100%;
}

小提琴 https://jsfiddle.net/gxkezny9/

其中一个父容器不是100％高度

Answer 3

正确使用Flexbox，可以通过使用app使height: 100vh占据全高，或者将 html / body 设为高度html, body { height: 100%所以app的高度按预期工作。

其次，当您使用align-items: flex-start时，所有项目最初都会在顶部对齐，但通过将align-self: stretch添加到sidebar，它将填充其父级的高度。< / p>

注意，对于弹性行项目，您不应使用height: 100%，您应该使用align-*属性。

注2，flex: 1和content-header上的content-main集不会产生任何影响，除非他们的父content的身高高于他们的总高度。即是否要将app align-items更改为stretch（如果align-self上的sidebar可以删除）

注3，flex: 1在IE中无法正常使用，改为使用flex-grow: 1或分配所有值，其中flex-basis应为auto }，即flex: 1 1 auto

Stack snippet

＆＃13;

＆＃13;

body {
  margin: 0;
}
.app {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  height: 100vh;                 /*  changed  */
  width: 100%;
}

.sidebar {
  background-color: red;
  align-self: stretch;            /*  added  */
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.content-header {
  flex: 1;                        /*  for IE, "flex-grow: 1" or "flex: 1 1 auto" 
 */
  background-color: grey;
}

.content-main {
  flex: 1;                        /*  for IE, "flex-grow: 1" or "flex: 1 1 auto" 
 */
  background-color: yellow;
}

＆＃13;

<div class='app'>
  <div class='sidebar'>
    This is sidebar
  </div>
  <div class='content'>
    <div class='content-header'>
      Content Header
    </div>
    <div class='content-main'>
      This is the main content
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;