Question

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

我认为这很简单，只需要flext-dir。到col。和＆＃34; flex：1＆＃34;在孩子们身上。（以及更多的代码，它在小提琴链接下）

但是一旦我将sidemenu包装在一个新的div中，我就可以让内容容器在sidemenu旁边而不是在旁边。来自flexbox的垂直填充失败。

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

所以有人有关于如何解决这个问题的som建议，或者可能有其他提示来创建这个想法。提前谢谢:)

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>

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

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

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

.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 （除了滑动屏幕以查看弹性行为）

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

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

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>

让flexbox为sidemenu填充浏览器的垂直空间

3 个答案: