Flex侧边栏：如何增长到高度的100％ [英] Flex sidebar: how to grow to 100% of height

问题描述

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

解决方案

我想通过将整个视口高度分配给您的容器，然后删除 flex：1 来自 .content 个孩子。

  .app {display：flex; flex-direction：行； 。 align-items：flex-start;高度：100vh； width：100％;}。sidebar {background-color：red;}。content {width：100％;显示：flex; flex-direction：column;}。content-header {background-color：grey;}。content-main {background-color：yellow;}  

 < div class ='app'> < div class ='sidebar'>这是侧边栏< / div> < div class ='content'> < div class ='content-header'>内容标题< / div> < div class ='content-main'>这是主要内容< / div>。 < / div>< / div>  

I´m building a sidebar using CSS flex and I need it to grow vertically to fill the whole screen vertical height. Here is a skeleton of what I´m doing.

JSFiddle here

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

.sidebar {
  background-color: red;
  height: 100%;
}

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

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

.content-main {
  flex: 1;
  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>

解决方案

I think I got it pretty close by assigning the full viewport height to your container and then removing flex: 1 from .content children.

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

这篇关于Flex侧边栏：如何增长到高度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！