Question

经过多方努力，我已经整合了一个Flexbox布局，旨在成为Web应用程序的布局。我实现了一些难以实现的结果 - 这是我的目标：

即使页面调整大小，页脚也会粘到底部
标题粘贴到顶部os页面调整大小
在调整浏览器大小时调整三列的中间部分
右手栏伸展到边缘页

这些图片显示，由于某种原因，该页面比浏览器的查看窗口更高。

这是页面来源：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>flexbox layout test</title>
<style>
*, *:before, *:after {
  box-sizing: inherit;
}
html, body {
    height: 100%;
}
.topbar {
  display: flex;
  width: 100%;
align-items: center;
}

.containerrow1 {
  margin: 15px;
  padding: 15px;
  display: flex;
  flex: 1;
background-color: yellow;
}

.containerrow2 {
  margin: 15px;
  padding: 15px;
  display: flex;
  flex: 2;
background-color: pink;
  height: 100vh;
}

.outercontainer {
  display: flex;
  flex-direction: column;
background-color: black;
}

.section {
  display: flex;
  flex-direction: column;
background-color: aliceblue;
  height: 100vh;
}


.section-nav {
  order: -1;
background-color: blue;
}

.section-nav, .section-content, .section-ads {
  overflow-y: scroll;
  padding: 2em;
}

</style>

  </head>
<body class='section'>


  <div class="outercontainer">
  <div class="containerrow1">
<div class="topbar">
  Blah
</div>
</div>

  <div class="containerrow2">

<main class="section-content">
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
</main>
    <nav class="section-nav">
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
</nav>
    <aside class="section-ads">
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
</aside>

  </div>

  <div class="containerrow1">
<div class="topbar">
  footer
</div>
</div>

  </div>

  </body>
</html>

Answer 1

添加以下样式：

html,
body {
  margin: 0;        /* allow content to take entire screen space */
}

.outercontainer {
  height: 100%;     /* make this the height of the screen, preventing overflow */
}

.section-ads {
  flex: 1;          /* make this take the rest of the right space */
}

在我的代码段中，我将.section-ads重命名为.section-ads1，因为Chrome隐藏了它，可能是由于广告拦截器（？）。

另外，删除此样式：

.containerrow1 {
  flex: 1;
}

<强>段：

＆＃13;

*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  height: 100%;
  margin: 0;
}
.topbar {
  display: flex;
  width: 100%;
  align-items: center;
}
.containerrow1 {
  margin: 15px;
  padding: 15px;
  display: flex;
  background-color: yellow;
}
.containerrow2 {
  margin: 15px;
  padding: 15px;
  display: flex;
  flex: 2;
  background-color: pink;
  height: 100vh;
}
.outercontainer {
  display: flex;
  flex-direction: column;
  background-color: black;
  height: 100%;
}
.section {
  display: flex;
  flex-direction: column;
  background-color: aliceblue;
  height: 100vh;
}
.section-nav {
  order: -1;
  background-color: blue;
}
.section-nav,
.section-content,
.section-ads1 {
  overflow-y: scroll;
  padding: 2em;
}

.section-ads1 {
  flex: 1;
}

＆＃13;

<body class='section'>
  <div class="outercontainer">
    <div class="containerrow1">
      <div class="topbar">
        Blah
      </div>
    </div>

    <div class="containerrow2">
      <main class="section-content">
        content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
      </main>
      <nav class="section-nav">
        nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>
      </nav>
      <aside class="section-ads1">
        ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>
      </aside>

    </div>

    <div class="containerrow1">
      <div class="topbar">
        footer
      </div>
    </div>

  </div>
</body>

＆＃13;

Answer 2

我清理了一下你的代码。 .section类从未应用class="section-content"，但前者从未应用过。将其更改为：class="section content"而不是.section-content，您可以使用.section和.section.content设置此格式。

此外，在剖面图层上设置vh: 100将无济于事，因为“vh”表示视口高度，而不是实际内容的高度。

最后，我认为您需要一个额外的滚动图层来根据需要设置背景样式。以下是一些应该按预期工作的更新代码：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.topbar {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.scroll {
  width: 100%;
  overflow: auto;
}
.containerrow1 {
  margin: 15px;
  padding: 15px;
  display: flex;
  background-color: yellow;
  height: 2vh;
}
.containerrow2 {
  margin: 0 15px;
  padding: 15px;
  display: flex;
  flex-direction: row;
  background-color: pink;
  align-items: stretch;
}
.outercontainer {
  display: flex;
  flex-direction: column;
  background-color: black;
  height: 100%;
  width: 100%;
}
.section {
  display: flex;
  background-color: aliceblue;
  flex-grow: 1;
}
.section.nav {
  order: -1;
  background-color: blue;
}
.section.nav,
.section.content,
.section.ads {
  padding: 2em;
}

<body class='section'>
  <div class="outercontainer">
    <div class="containerrow1">
      <div class="topbar">Blah</div>
    </div>
    <div class="scroll">
      <div class="containerrow2">
        <main class="section content">content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section</main>
        <nav class="section nav">nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>
        </nav>
        <aside class="section ads">ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>
        </aside>
      </div>
    </div>
    <div class="containerrow1">
      <div class="topbar">footer</div>
    </div>
  </div>
</body>

Answer 3

我遇到了一些难以实现的结果 - 这是我的   目标：


即使页面调整大小，页脚也会粘到底部

标题粘贴到顶部os页面调整大小

在调整浏览器大小时调整三列的中间部分

右侧栏伸展到页面边缘

所以看起来你已经有很多事情要做了。您只需要将右侧列拉伸并将整个布局限制为视口的大小。

以下几行代码可以使它全部工作。

从margin删除默认body。
```
html, body {
    height: 100%;
    margin: 0; /* new */
}
```
说明：HTML default body margin

将height添加到.outercontainer。

.outercontainer {
    display: flex;
    flex-direction: column;
    background-color: black;
    height: 100%; /* new */
}

说明：Working with the CSS height property and percentage values

修补涉及flexbox中垂直滚动条的Firefox错误

.containerrow2 {
    margin: 15px;
    padding: 15px;
    display: flex;
    flex: 2;
    background-color: pink;
    height: 100vh;
    min-height: 0; /* new */
    min-width: 0; /* new */
}

说明：Vertical scroll rendering issue in Flexbox in Firefox

拉伸最右侧的列

.section-ads { flex: 1; }

DEMO

如何将flexbox容器装入页面？

3 个答案: