Question

我想动态调整DIV容器的高度，以填充页面底部和上面内容之间的剩余空间。

我尝试使用height:100%或height:calc(100%- XX);，但未定义上段的高度。我怎样才能调整下面的容器大小？

因此，在这支笔中，我想删除滚动条并在整个页面中显示内容。

<h1>Ciao</h1>
<section class="container">
   <div>here
   </div>
</section>

https://codepen.io/anon/pen/NyPqBv

Answer 1

您可以将身体的高度修改为100vh并使用flex。您创建一个div来填充标题后面的剩余空格，在此div中放置内容并应用overflow:auto来获取滚动。

＆＃13;

body {
  margin: 0;
  height: 100vh;
  display:flex;
  flex-direction:column;
}

.fill-height-or-more {
  flex: 1;
  overflow: auto;
}

.fill-height-or-more>div {
  display: flex;
  flex-direction: column;
}

.some-area>div {
  padding: 1rem;
}

.some-area>div:nth-child(1) {
  background: #88cc66;
}

.some-area>div:nth-child(2) {
  background: #79b5d2;
}

.some-area>div:nth-child(3) {
  background: #8cbfd9;
}

.some-area>div:nth-child(4) {
  background: #9fcadf;
}

.some-area>div:nth-child(5) {
  background: #b3d5e6;
}

.some-area>div h1,
.some-area>div h2 {
  margin: 0 0 0.2rem 0;
}

.some-area>div p {
  margin: 0;
}

html,
body {
  height: 100%;
}

＆＃13;

<h1>Ciao</h1>
<section class=" fill-height-or-more">
  <div class="some-area">
    <div>
      <h1>Boxes That Fill Height (or more)</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </div>
    <div>
      <h2>Two</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
    </div>
    <div>
      <h2>Three</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
    </div>
    <div>
      <h2>Four</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
    </div>
  </div>
</section>

＆＃13;

Answer 2

要删除滚动并填充页面，

根据需要在您的CSS中添加postion: fixed;。

我对css做了一些小改动，以复制你需要的东西。

https://codepen.io/anon/pen/oEgbdy

.container {
  position: fixed;
}
.bg{
  height: 100%;
  background: hsla(100, 50%, 60%, 1);
}
html, body {
  height: 100%;
}

<div class="container bg">
 <h1 class="" style="background-color:white">Ciao</h1>
<section class="">
  <div>here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here 
  </div>
</section></div>

基于上述内容的动态高度

2 个答案: