Question

我知道有很多像这样的问题，但我读了它们并没有找到适合我具体情况的答案。

我有一个PHP文件，它生成一个包含大量数据的页面。我想让它更加人性化，所以我创建了一个列设计，其中每列都有它的标题，部分包含内容和页脚。我不想使内容可滚动的部分，因为它包含多个内部数据的div。

我想要实现的是

我所做的是

和

是的，这些不是原创的截图，而是我所做的模型。因为事实上我希望显示的数据是公开共享的，所以更容易使它们成为那样;）你知道，私事......

这是我的CSS和HTML的一部分（负责查看一列）：

＆＃13;

div.col {
  float: left;
  width: 22.5%;
  margin: 0px 10px 0px 10px;
  border: 1px solid gray;
  height: 95vh;
}

div.article-container {
  overflow: auto;
  position: relative;
}

header, footer {
  padding: 0.1em;
  color: white;
  background-color: black;
  clear: left;
  text-align: center;
}

article {
  padding: 1em;
  overflow: hidden;
  border: 1px solid gray;
  margin: 10px;
  text-align: center;
}

＆＃13;

<body>
  <div class="col">
    <header>
      <h4>Header text header text header text</h4>
    </header>
    <div class="article-container">
      <article>
        <h2>Nazwa</h2>
        <h3>Data</h3>
        <p>Osoba</p>
      </article>
      <article>
        <h2>Nazwa</h2>
        <h3>Data</h3>
        <p>Osoba</p>
      </article>
    </div>
    <footer>Footer text footer text footer text</footer>
  </div>
  <div class="col">
    <header>
      <h4>Header text header text header text</h4>
    </header>
    <article>
      <h2>Nazwa</h2>
      <h3>Data</h3>
      <p>Osoba</p>
    </article>
    <article>
      <h2>Nazwa</h2>
      <h3>Data</h3>
      <p>Osoba</p>
    </article>
    <footer>Footer text footer text footer text</footer>
  </div>
</body>

＆＃13;

能帮我找到答案：如何在这里正确组合CSS和HTML，以获得固定页眉，固定页脚和可滚动空间以及它们之间的内容？

提前谢谢大家：）

Answer 1

如果你玩定位，你可能能够解决它。页眉/页脚需要具有相对静态的高度，因为它需要用于定位文章容器。

示例1（静态高度）

＆＃13;

* { box-sizing: border-box; }

div.col {
  float: left;
  width: 22.5%;
  margin: 0px 10px 0px 10px;
  border: 1px solid;
  height: 95vh;
  position: relative; /* notice */
}

div.article-container {
  overflow: auto;
  position: absolute;

  /* notice */
  top: 82px; /* the header height */
  bottom: 39px; /* the footer height */
  left: 0; right: 0;
}

header {
  height: 82px; /* placeholder */
}

footer { /* notice */
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 39px; /* placeholder */
}

header, footer {
  padding: 0.1em;
  color: white;
  background-color: black;
  clear: left;
  text-align: center;
}

article {
  padding: 1em;
  overflow: hidden;
  border: 1px solid gray;
  margin: 10px;
  text-align: center;
}

＆＃13;

<body>
  <div class="col">
    <header>
      <h4>Header text header text header text</h4>
    </header>
    <div class="article-container">
      <article>
        <h2>Nazwa</h2>
        <h3>Data</h3>
        <p>Osoba</p>
      </article>
      <article>
        <h2>Nazwa</h2>
        <h3>Data</h3>
        <p>Osoba</p>
      </article>
    </div>
    <footer>Footer text footer text footer text</footer>
  </div>
</body>

＆＃13;

示例2（flexbox）

＆＃13;

* { box-sizing: border-box; }

div.col {
  float: left;
  width: 22.5%;
  margin: 0px 10px 0px 10px;
  border: 1px solid;
  height: 95vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.article-container, footer, header {
  flex-basis: 0;
}

div.article-container {
  overflow-y: auto;
  flex-grow: 1;
}

header, footer {
  padding: 0.1em;
  color: white;
  background-color: black;
  clear: left;
  text-align: center;
}

article {
  padding: 1em;
  overflow: hidden;
  border: 1px solid gray;
  margin: 10px;
  text-align: center;
}

＆＃13;

<body>
  <div class="col">
    <header>
      <h4>Header text header text header text</h4>
    </header>
    <div class="article-container">
      <article>
        <h2>Nazwa</h2>
        <h3>Data</h3>
        <p>Osoba</p>
      </article>
      <article>
        <h2>Nazwa</h2>
        <h3>Data</h3>
        <p>Osoba</p>
      </article>
    </div>
    <footer>Footer text footer text footer text</footer>
  </div>
</body>

＆＃13;

Answer 2

您的文章容器需要一个固定的高度才能使溢出自动生效：

div.article-container {
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  height: 80%;
}

调整高度直至看起来不错：）

编辑：根据@ Martin的建议，切换溢出自动仅在垂直方向。

Answer 3

html, body {
    overflow: none;
}
.col {
    height: 95vh;
    overflow: none;
} 
.article-container {
    height: calc( 100% - [SUMMARY_OF_HEIGHT_OF_HEADER+HEIGHT_OF_FOOTER] );
    // this will give the article-container the correct height in every viewport;
    overflow: auto;
}

如何在具有特定高度的div内部创建可滚动的div

3 个答案:

示例1（静态高度）

示例2（flexbox）