2 列弹性布局填充 100% window 但不填充 window 溢出

Question

我在使用两列布局（边栏 + 主要内容）时遇到问题。目标是使此填充 100% 垂直 space.

目前它填充到 window，但如果内容低于 window 需要您滚动，则 flex 容器的高度仅与 window 一样大.

参见 this jsfiddle。请注意侧边栏如何填充右下角的 window，但是当您滚动时它不会展开以容纳 window overflow

HTML:

<div id="page_container">
    <div id="page_sidebar"></div>
    <div id="page_primary">
    </div>
</div>

CSS:

html, body{
    height: 100%;
}
    #page_container{
        display: flex;
        width: 100%;
        height: 100%;
        flex: 1;
    }
    #page_sidebar{
        flex: 0 0 220px;
        background-color: #2E3254;
    }
    #page_primary{
        flex: 1;
        background-color: #F8F9FA;
    }

Answer 1

从您的 #page_container 中删除 height:100%。

Answer 2

从 #page_container 移除高度

html, body{
 height: 100%;
}
#page_container{
 display: flex;
 width: 100%;
 flex: 1;
}
#page_sidebar{
 flex: 0 0 220px;
 background-color: #2E3254;
}
#page_primary{
 flex: 1;
 background-color: #F8F9FA;
}

    <div id="page_container">
     <div id="page_sidebar">This is sidebar</div>
     <div id="page_primary">
      This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content
      
     </div>
    </div>

Answer 3

我认为即使内容不足以填充高度，您也需要 #page_container 的高度为 100%。所以你可以改用 min-height:100%。

注意： 删除 height:100% 会造成麻烦，因为如果没有足够的内容，您的 div 将不再扩展到 100%。因此，您可以放心使用我的方法。

html, body{
 height: 100%;
}
#page_container{
 display: flex;
 width: 100%;
 min-height:100%;
 flex: 1;
}
#page_sidebar{
 flex: 0 0 220px;
 background-color: #2E3254;
}
#page_primary{
 flex: 1;
 background-color: #F8F9FA;
}

    <div id="page_container">
     <div id="page_sidebar">This is sidebar</div>
     <div id="page_primary">
      This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content
      
     </div>
    </div>

2 列弹性布局填充 100% window 但不填充 window 溢出

2 column flex layout fills 100% of window but not window overflow

html

css

fluid-layout

flexbox