Question

我正在处理内容区域中包含标题，2个侧边栏，内容区域和页脚的页面。是否可以将内容区域和页脚保留在视口内，以便使用flexbox将唯一滚动内容区域（页脚固定到底部）。

这是我想要完成的一个例子：

注意页面如何滚动。我正在寻找的只是蓝色区域滚动（黄色页脚始终在视图中）。我仍然希望保持窗口的灵活性，并希望在没有javascript的情况下完成此任务。

HTML：

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div class="left-sidebar">Left Sidebar</div>
    <div class="center">
      <div class="work-area">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id justo libero. Aenean est libero, venenatis vitae pulvinar nec, ultrices id nulla. Morbi ante turpis, faucibus id eros sed, pharetra efficitur eros. Etiam porttitor pretium tempus. Quisque ac tortor vitae risus tristique tempus quis id ante. Pellentesque maximus leo vel dolor dignissim tempus. Nam fringilla, augue a euismod aliquam, lorem velit placerat dui, non efficitur justo urna in ante. Aliquam vehicula vel sem sit amet feugiat. Proin ex leo, auctor ac elit in, malesuada vestibulum orci. Duis eget porta urna. Mauris lacinia vestibulum augue, non volutpat justo accumsan sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur malesuada quam nulla, et viverra orci luctus vel.</p>
        <p>Donec ut sem sit amet lacus rhoncus pretium. Morbi varius sit amet lorem et tempus. Fusce ipsum neque, rhoncus nec urna sed, posuere faucibus urna. Donec sit amet placerat nunc, pretium facilisis mauris. Nulla facilisi. Sed id libero mi. Praesent in auctor nisi, id euismod dui. Proin suscipit lacus turpis, eu vulputate dolor condimentum sit amet. Mauris in accumsan lacus. Nunc a sem magna. Curabitur imperdiet magna tincidunt erat consequat scelerisque.</p>
        <p>Ut ac dolor nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sit amet turpis nisl. Mauris eget nulla at augue varius iaculis tincidunt id sem. Proin arcu nunc, vulputate eget sodales et, iaculis a quam. Morbi ex orci, commodo at posuere sed, facilisis eu purus. Nunc id neque nisi. In egestas nisl nec mi molestie tincidunt. Aliquam dictum, arcu et fringilla faucibus, ex nisi sollicitudin nisl, in egestas leo diam eu leo.</p>
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus condimentum risus sit amet est vehicula, tempor congue quam rutrum. Fusce dictum vehicula dui, at vehicula sem tempor sed. Etiam a arcu consectetur, convallis ipsum id, fermentum sem. Pellentesque eget fringilla diam. Nulla sollicitudin vel turpis a ultricies. Cras eget massa a felis porttitor fringilla sed non diam. Etiam vel velit porttitor, porta felis a, egestas enim. Sed ac dui nibh. Quisque accumsan fermentum commodo. Ut sit amet purus ante. Nulla nec velit lacinia, auctor sapien porta, viverra neque. Praesent euismod suscipit enim, eget rutrum justo ultricies id.</p>
        <p>Pellentesque magna urna, congue eu dui sit amet, posuere tempor erat. Curabitur fermentum magna quis orci tincidunt, in efficitur urna bibendum. Donec finibus porttitor felis id tristique. Sed vitae sem eget nulla tincidunt sagittis et vitae ante. Nulla id gravida lacus. In ligula eros, sodales eget convallis a, pharetra eu mauris. Aenean sollicitudin est magna, ac vehicula dolor tincidunt vel. Donec ut pellentesque augue.</p>
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus condimentum risus sit amet est vehicula, tempor congue quam rutrum. Fusce dictum vehicula dui, at vehicula sem tempor sed. Etiam a arcu consectetur, convallis ipsum id, fermentum sem. Pellentesque eget fringilla diam. Nulla sollicitudin vel turpis a ultricies. Cras eget massa a felis porttitor fringilla sed non diam. Etiam vel velit porttitor, porta felis a, egestas enim. Sed ac dui nibh. Quisque accumsan fermentum commodo. Ut sit amet purus ante. Nulla nec velit lacinia, auctor sapien porta, viverra neque. Praesent euismod suscipit enim, eget rutrum justo ultricies id.</p>
        <p>Pellentesque magna urna, congue eu dui sit amet, posuere tempor erat. Curabitur fermentum magna quis orci tincidunt, in efficitur urna bibendum. Donec finibus porttitor felis id tristique. Sed vitae sem eget nulla tincidunt sagittis et vitae ante. Nulla id gravida lacus. In ligula eros, sodales eget convallis a, pharetra eu mauris. Aenean sollicitudin est magna, ac vehicula dolor tincidunt vel. Donec ut pellentesque augue.</p>
      </div>
      <div class="settings">Settings Bar</div>
    </div>
    <div class="right-sidebar">Right Sidebar</div>
  </div>
</div>

CSS：

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

div {
  display: flex;
  flex-grow: 1;
}

p {
  margin: 0;
  padding: 1em 0;
  display: block;
  color: #fff;
  box-sizing: border-box;
}

.wrapper {
  background: blue;
  flex-grow: 1;
  flex-direction: column;
}

.header {
  background: red;
  min-height: 50px;
  flex-grow: 0;
  width: 100%;
  padding: 1em;
  box-sizing: border-box;
}

.left-sidebar, .right-sidebar {
  background: green;
  width: 100px;
  flex-grow: 0;
  padding: 1em;
    box-sizing: border-box;
}

.center {
  flex-direction: column;
  overflow: auto;
}

.settings {
  background: yellow;
  flex-grow: 0;
  min-height: 30px;
  padding: 1em;
  box-sizing: border-box;
}

.work-area {
  flex-direction: column;
}

Answer 1

这有用吗？ http://jsfiddle.net/amwill/5qqqfbnc/3/

这是我添加的内容：

body, html { overflow: hidden; }
.header {
  position: absolute;
  top: 0px;
}
.center {
  position: relative;
  top: 50px;
  height: 100vh;
}
.settings {
  position: fixed; //sticky footer
  bottom: 0;
  width: 80%; //whatever width it needs to be
}

使用flexbox在视口内保留div

1 个答案: