让 flexbox 为侧边菜单填充浏览器的垂直空间

Question

我需要一个可以根据浏览器大小进行缩放的侧边菜单。但我还需要页眉和页脚，以及旁边菜单旁边的内容容器。假设侧边菜单是宽度的 1/4，内容容器是宽度的 3/4，但侧边菜单和内容容器的高度始终是浏览器大小的 100% 或更高，具体取决于内容容器和侧边菜单中的内容。

我认为这很简单，只要有 flext-dir。上校和孩子们的“flex：1”。 （还有一点代码，在小提琴链接下面）

但是一旦我将侧边菜单包装在一个新的 div 中，我就可以使内容容器靠近侧边菜单而不是在下面。来自 flexbox 的垂直填充失败。

https://jsfiddle.net/frrvdq2n/2/

那么有没有人对如何解决这个问题有一些建议，或者可能有其他提示来创建这个想法。提前谢谢:)

IMG. of how om thinking the sizing should be on most browser sizes.

这里也是代码，只是以防万一：

HTML

  <!--<div class="container"> uncomment to see colapse-->
    <div class="wrapper">
      <div class="row3">Option One</div>
      <div class="row3">Option Two</div>
      <div class="row3">Option Three</div>
    </div>
  <!--</div>uncomment to see colapse-->

CSS

.wrapper, html, body {
  height:100%;
  margin:0;
}

.wrapper {
   display: flex;
   flex-direction: column;
}

.row3 {
   background-color: green;
   flex:2;
   display: flex;
}

Answer 1

在您的初始代码示例中，您只需要同时给.container 一个高度。

.container, .wrapper, html, body {
    height:100%;
    margin:0;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

.row3 {
    background-color: green;
    flex:2;
    display: flex;
}

<div class="container">
    <div class="wrapper">
        <div class="row3">Option One</div>
        <div class="row3">Option Two</div>
        <div class="row3">Option Three</div>
    </div>
</div>

---

从上面的示例中，您现在可以通过在中间添加 2 个子元素 row3 来轻松创建一个看起来像发布的图像的布局，作为侧边栏和内容

.container, .wrapper, html, body {
    height:100%;
    margin:0;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

.row3 {
    background-color: green;
    flex:2;
    display: flex;
}

.col2:nth-child(1) {
    background-color: lightblue;
    flex-basis: 25%;
}

.col2:nth-child(2) {
    background-color: lightgreen;
    flex-basis: 75%;
}

<div class="container">
    <div class="wrapper">
        <div class="row3">Option One</div>
        <div class="row3">
            <div class="col2">Option Two A</div>
            <div class="col2">Option Two B</div>        
        </div>
        <div class="row3">Option Three</div>
    </div>
</div>

---

通过在row3 元素上使用flex-grow 和flex-basis，您可以根据内容、设定高度调整它们的大小并填充剩余空间。

.container, .wrapper, html, body {
    height:100%;
    margin:0;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

.row3:nth-child(1) {
    background-color: green;
    flex-basis: 50px;              /*  a set height  */
}

.row3:nth-child(2) {
    flex:1;                         /*  fill the remain  */
    display: flex;
    margin: 10px 0;
}

.row3:nth-child(3) {
    background-color: green;        /*  sized by content  */
}

.col2:nth-child(1) {
    background-color: lightblue;
    flex-basis: 25%;
}

.col2:nth-child(2) {
    background-color: lightgreen;
    flex-basis: 75%;
    margin-left: 10px;
}

<div class="container">
    <div class="wrapper">
        <div class="row3">Option One</div>
        <div class="row3">
            <div class="col2">Option Two A</div>
            <div class="col2">Option Two B</div>        
        </div>
        <div class="row3">Option Three</div>
    </div>
</div>

Answer 2

您可以组合弹性框并使用典型的 HTML5 结构：

DEMO （一边滑出屏幕以查看 flex 行为）

body {
  min-height:100vh;
  margin:0;
}
html {
  height:100%;
}
html,body {
  display:flex;
  flex-direction:column;
}
header {
  margin:0 0 10px ;
  background:rgb(52, 110, 174);
}
footer {
  background:rgb(173, 53, 54); 
  margin:10px 0 0px ;
}
main {
  flex:1;
  display:flex;
}
aside {
  min-width:200px;
  flex:1;
  background:rgb(53, 174, 79);
}
section {
  flex:5;
  margin-left:10px;
  background:rgb(190, 67, 181);
}
header,footer,aside,section {
font-size:3vmax;
color:white;
display:flex;
align-items:center;
justify-content:center;
line-height:2em;

<header>header</header>
<main>
  <aside>
    aside
  </aside>
  <section>
    section or single div 
  </section>
</main>
<footer>footer</footer>

这是一个类似的布局How can I make my flexbox layout take 100% vertical space? 几乎是重复的，类似的方法但布局顺序不同:)

Answer 3

查看下面的代码 sn-p。所有这一切的秘诀是将所有组件包装在一个高度为 100vh 的 div 中。使用viewport units 是确保内容保留在浏览器视口中的好方法，无论浏览器大小如何。我使用 Flexbox 的唯一地方是将侧边菜单和内容放在一起。

body {
  padding: 0;
  margin: 0;
}

.view_wrapper {
  width: 100%;
  height: 100vh;
}

header, footer {
  position: relative;
  left: 0;
  width: 100%;
  height: 10%;
  background: #616D74;
  color: white;
}

header {
  top: 0;
}

footer {
  bottom: 0;
}

.main_container {
  width: 100%;
  height: 80%;
  display: flex;
}

.sidemenu_container {
  width: 25%;
  height: 100%;
  padding: 10px 5px 10px 0px;
  box-sizing: border-box;
}

.sidemenu {
  width: 100%;
  height: 100%;
  background: #F36E55;
}

.content_container {
  width: 75%;
  height: 100%;
  padding: 10px 0px 10px 5px;
  box-sizing: border-box;
}

.content {
  width: 100%;
  height: 100%;
  background: #E2DCD0;
 }
}

<div class="view_wrapper">

<header></header>
<div class="main_container">
  <div class="sidemenu_container">
     <div class="sidemenu">
     </div>
  </div>
  <div class="content_container">
    <div class="content">
    </div>
  </div>
</div>
<footer></footer>
</div>