使用 CSS/Flexbox 填充页面的整个视图答案

【问题标题】：Fill Entire View of Page with CSS/Flexbox使用 CSS/Flexbox 填充页面的整个视图
【发布时间】：2018-05-30 18:51:30
【问题描述】：

高度仍然让我感到困惑，不知道何时何地放置它。

<div id="app"> 
     <div className="wrapper">
        <header>Header</header>
        <nav>
              Nav
          </nav>
        <div className="main-wrapper">
          <main>
            main
          </main>
          <footer>
            footer
          </footer>
        </div>
      </div>
</div>



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

.wrapper {
    display: flex;
    flex-wrap: wrap;
    header {
      background: red;
      flex: 0 0 100%;
    }

    nav {
      background: blue;
      flex: 0 0 5%;
    }

    .main-wrapper {
      background: gray;
      display: flex;
      flex: 0 0 95%;
      flex-wrap: wrap;
      main {
        background:  yellow;
        flex: 0 0 100%;
      }

      footer {
        background: darkorange;
        flex: 0 0 100%;
      }
    }
}

我想要实现的是所有区域都将填满整个屏幕（没有滚动条）。

我希望标题最大为 25%。页脚大概 25%（尽管我仍然不确定是否要始终显示页脚）。

如果导航和可能的主要内容在内容超过屏幕大小时应该有滚动条。

【问题讨论】：

因为你的 html 和 body 共享 100vh，你可以在 div#app 和 div.wrapper 上使用 height 100% 将高度传递给孩子，从那里你可以在标题上设置 height:25%以此类推。
jsfiddle.net/sr4qykdg

标签： html css reactjs flexbox

【解决方案1】：

为什么不将100vh 传递给孩子们，并根据需要将高度设置为百分比。

body, html {
    height: 100vh;
    margin: 0;
}


.wrapper {
    display: flex;
    flex-wrap: wrap;
    height: 100vh;
}

header {
    background: red;
    flex: 0 0 100%;
    max-height:25%;
 height:25%;
}

nav {
    background: blue;
    flex: 0 0 5%;
    height:75%;
}

.main-wrapper {
    background: gray;
    display: flex;
    flex: 0 0 95%;
    flex-wrap: wrap;
    height:75%;    
}

main {
    background: yellow;
    flex: 0 0 100%;
    height:75%;
    overflow-y: auto;
}

footer {
    background: darkorange;
    flex: 0 0 100%;
    height:25%;
    max-height:25%;
}

<div id="app">
  <div class="wrapper">
    <header>Header</header>
    <nav>
      Nav
    </nav>
    <div class="main-wrapper">
      <main>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </main>
      <footer>
      footer
    </footer>
    </div>
    
  </div>
</div>

【讨论】：

我最初试图沿着这条路线走，但无论出于何种原因，我都很难设置正确的 % 并且看起来不正确。
百分比处理起来会很奇怪，因为您的页脚与页眉不同。
啊，可能是这样，是的，我仍然不确定页脚将如何运行，如果它会在页眉的外部或更多在主区域的内部。
网格布局对于您想要实现的目标非常有希望。
我知道你不必说服我。我是它的大力支持者，但目前它不是一个可行的选择。

【解决方案2】：

https://jsfiddle.net/3pxmm0mz/1/

body,
html {
  height: 100vh;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  header {
    background: red;
    flex: 0 0 100%;
    height: 100px;
  }
  nav {
    background: blue;
    flex: 0 0 5%;
  }
  .main-wrapper {
    background: gray;
    display: flex;
    flex: 0 0 95%;
    flex-wrap: wrap;
    main {
      background: yellow;
      flex: 0 0 100%;
      min-height: calc(100vh - 200px);
      overflow: auto;
    }
  }
  footer {
    background: darkorange;
    flex: 0 0 100%;
    height: 100px;
  }
}

<div id="app">
  <div class="wrapper">
    <header>Header</header>
    <nav>
      Nav
    </nav>
    <div class="main-wrapper">
      <main>
        main
      </main>
    </div>
    <footer>
      footer
    </footer>
  </div>
</div>

您可以调整 calc() 以减去一个百分比或固定数量的像素，具体取决于您的目标。

【讨论】：

200px 是从哪里来的？
我也看到你在主要区域有溢出但是导航区域呢？
页眉 100px + 页脚 100px = 200px 使用 calc() 我减去页眉 + 页脚高度。
你真的可以摆脱溢出。我测试了去掉它，你会得到一个漂亮的卷轴，它更整洁。
我必须自己测试，但我确实看到导航无法处理它。屏幕会不断扩大，为我添加的任何内容腾出空间。

【解决方案3】：

我看到您正在使用 CSS Flexbox flex 和 flex-wrap 创建全屏二维布局，但 flexbox 模块是根本目的指导在整个页面各处显示特定的、离散的页面元素。

理想情况下，在此设置中，您可以（也许应该）使用 CSS Grid。

这将为您提供各种灵活性 - 更不用说 简单性 - 您无法通过 flexbox 访问这些灵活性。

工作示例：

#app {
display: grid;
grid-template-rows: 25% 50% 25%;
grid-template-columns: 10% 90%;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}

header {
grid-area: 1 / 1 / 2 / 3;
background-color: red;
}

nav {
grid-area: 2 / 1 / 3 / 2;
background-color: blue;
}

main {
grid-area: 2 / 2 / 3 / 3;
background-color:  yellow;
}

footer {
grid-area: 3 / 1 / 4 / 3;
background-color: darkorange;
}

<div id="app"> 
<header>Header</header>
<nav>Nav</nav>
<main>main</main>
<footer>footer</footer>
</div>

【讨论】：

我很想使用网格，但是使用该网站的 40% 的用户使用的是 IE 11，如果不使用框架或其他东西编写备用方案，这是不可能的。跨度>
很公平。我知道这排除了使用 CSS Grid。
是的，我真的很失望，因为我真的很想使用它，可能会让我的生活更轻松，但是数量太高了，现在的工作量太大，而且会范围扩大太多。