Question

我有这样的布局


cd D:/xxx/xxx
protractor protractor.conf.js

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

table {
  border: solid 1px;
}

.main-div {
  height: 100%;
}

.container {
  height: 100%;
}

.top {
  width: 100%;
  background: red;
}

.bottom {
  height: calc(100% - 1em);
  overflow-y: unset;
  background: blue;
}

.table-panel {
  overflow-y: scroll;
  height: 100%;
  background-color: green;
}

.working-area {
  height: calc(100% - 20px);
}

.footer {
  height: 20px;
}

布局的主要思想是在使用垂直大小调整时看到'table-panel'在溢出时滚动。但是水平调整大小的'top'div的文本包装也是必需的。因此，如果试图让'top'div更高，'bottom'div会覆盖页脚。

我想找到一些方法让'table-panel'在溢出时滚动而没有任何副作用。我尝试使用'flex'，但我在css方面经验不足以至于我没有达到目标 - 滚动总是丢失。

有没有办法在没有js的情况下做到这一点？

更新：我希望看到的确切结果，但没有js https://jsfiddle.net/a4fay1r0/

Answer 1

不确定这是否是您正在寻找的内容，但是如果您将height课程的.container更改为calc(100% - 20px);，因为您的页脚被锁定为20px似乎解决问题。

编辑：我注意到调整大小仍有问题。我已经制作了.container和.bottom个展示广告容器的.bottom和.table-panel个flex: 1;的{{1}}个孩子看到更新的jsfiddle

https://jsfiddle.net/g35ume3z/3/

Answer 2

使用flexbox，您可以使用列方向并使用属性{{1}}和{{1}}进行播放。

_{注意：我删除了一些容器}

{{1}}

{{1}}

Answer 3

CSS Grid布局现在可以做到。

Support现在在大多数当前浏览器中。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.container>* {
  border: 1px solid green;
}

.content {
  overflow-y: auto;
}

<div class="container">
  <header>HEADER</header>
  <div class="content">CONTENT
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure delectus iusto reiciendis nihil obcaecati expedita velit architecto ad! Cumque ex at accusantium illo ipsa tenetur reiciendis repudiandae quo, sint voluptate, eligendi libero assumenda
      animi in rerum! Quam quidem vero esse inventore a ab praesentium enim voluptatibus, vitae quae. Earum non provident, soluta dolor eius dolores accusamus, neque dicta vitae, deserunt, cum atque voluptates recusandae consequatur. Id sit nisi animi
      asperiores et reprehenderit dolore dolorum cupiditate distinctio, blanditiis mollitia temporibus saepe ipsa fuga odit quasi, dignissimos porro tempora libero, vitae perspiciatis autem ex aperiam quis. Hic eveniet at repellendus, sapiente. Molestias
      quaerat dolorem hic pariatur sunt aperiam, ea officia, laboriosam at vel reiciendis consectetur. Voluptate delectus ipsa doloremque, ratione eum. Eos in corporis rem aliquam! Unde consectetur, quo iure reprehenderit ex necessitatibus! Officiis iste
      aperiam explicabo cum, ipsum corporis optio voluptatum tenetur architecto fugiat sapiente fugit voluptatibus minus corrupti maxime minima nostrum consequatur! Temporibus vitae enim labore reiciendis natus est in doloribus velit dolor deserunt iusto
      pariatur quidem, omnis itaque possimus ratione, mollitia aperiam quod numquam, perferendis expedita. Corrupti dolor laboriosam quasi, dicta delectus, necessitatibus culpa saepe beatae fugiat non in architecto placeat alias! Accusamus iusto iste
      veritatis recusandae dolorum odio.</p>
  </div>
  <footer>FOOTER</footer>
</div>

如何使div始终占据所有高度并保持滚动溢出？

3 个答案: