Question

我正在尝试制作一个可变高度的固定“浮动”页脚，即使内容发生更改，该页脚也始终显示在底部。

<html>
  <body>
    <div id="root">
      <div class="app">
        <div class="header"></div>
        <div class="content"></div>
        <div class="footer"><div>
      </div>
    </div>
  </body>
</html>

以及以下CSS ：（根据Fixed header, footer with scrollable content的第二个答案）

html, body, #root {
  height: 100%
}

.app {
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-wrap: nowrap;
}

.header {
  flex-shrink: 0;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
  flex-grow: 1;
}

.footer {
  flex-shrink: 0;
}

但是，随着内容的动态变化，页面会变形并且元素彼此重叠。我发现将#root设置为height: 275%可使页面在展开状态下（且仅在此状态下）正确显示。

将#root设置为min-height: 100%会使页脚在没有足够内容的情况下显示在页面中间，并且在内容可滚动时不再浮动。

Answer 1

我认为这就是您要实现的https://codepen.io/anon/pen/bmMrOg

<div id="root">
  <div class="app">
    <div class="header">
      header
    </div>
    <div class="content">
      <div>content</div>

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

和CSS

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

.app {
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-wrap: nowrap;
  flex-direction: column;
}

.header {
  flex-shrink: 0;
  background: blue;
}

.content {
  overflow: auto;
  flex-grow: 1;
  background: red;
}

.footer {
  flex-shrink: 0;
  background:green;
}

CSS Flexbox-具有可滚动内容的浮动可变高度页脚

1 个答案: