Question

高度仍然让我感到困惑，无论何时何地放置它。

<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％（虽然我仍然不确定我是否希望页脚始终显示）。

如果内容越过屏幕大小，导航和主要内容应该有滚动条。

Answer 1

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（）以减去百分比或固定数量的像素，具体取决于您的目标。

Answer 2

为什么不将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>

Answer 3

我发现您使用 CSS Flexbox flex和flex-wrap来创建全屏二维布局，但Flexbox模块基本上是指导在整个页面中显示特定的离散页面元素。

理想情况下，在此设置中，您可以 - 也许应该 - 使用 CSS网格。

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

工作示例：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

3 个答案: