css 无法滚动到容器div的底部

pcrecxhr 于 2023-06-25 发布在其他

关注(0)|答案(4)|浏览(183)

我看到还有其他题目类似的问题，但我没有从这些问题中找到令人满意的答案。
问题是.content需要在.container内部100%的可用视图空间，但是当.content设置为100%高度时，占用的空间相当于.container div的100%，导致其底部大部分被隐藏，即使滚动到底部。
原因是因为.header向下推.container div内部的.content div。我知道CSS calc()函数，但在这种特殊情况下，我不知道.header div的确切高度是多少，所以需要另一个选项。
下面是代码：

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

.container {
    height: 100%;
    width: 100%;
}

.header {
    padding: 10px;
    background: dodgerblue;
    width: 100%;
    color: #fff;
}

.content {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background: ivory;
}

.contentData {
    padding: 20px;
    margin: 20px;
    border: 1px solid silver;
}

<div class="container">
  <div class="header">
    Header Title
  </div>
  <div class="content">
    <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/76546238/cannot-scroll-to-the-bottom-of-container-div

4条答案

按热度按时间

x33g5p2x1#

从html, body{}中卸下width: 100%和height: 100%。我假设它的行为是这样的，因为你也设置了overflow-y: scroll，所以计算有点不稳定。

html, body {
    margin: 0;
    padding: 0;
}

.container {
    height: 100%;
    width: 100%;
}

.header {
    padding: 10px;
    background: dodgerblue;
    width: 100%;
    color: #fff;
}

.content {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background: ivory;
}

.contentData {
    padding: 20px;
    margin: 20px;
    border: 1px solid silver;
}

<div class="container">
  <div class="header">
    Header Title
  </div>
  <div class="content">
    <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-06-25

irlmq6kh2#

您可能会发现，为页眉部分定义一个高度百分比，然后定义一个将使页面高度达到97%的量是很有用的。任何超过97%的内容都将迫使Edge和Chrome自动尝试通过为页面添加滚动条来进行补偿。

.header {
    padding: 10px;
    background: dodgerblue;
    width: 100%;
    height: 10%;
    color: #fff;
}

.content {
    width: 100%;
    height: 87%;
    overflow-y: scroll;
    background: ivory;
}

根据页面的设计，您可能还需要添加页脚。如果是，则从内容部分中减去高度。请记住，如果您不希望浏览器为页面实现第二个滚动条，则需要将页面高度限制为97%。
不管你有两个部分还是三个部分，都要摆弄它，直到它在视觉上看起来平衡而有吸引力。这将给予你你正在寻找的专业外观。

赞(0）回复(0）举报 2023-06-25

t5fffqht3#

您可以使标题具有position: absolute;，这样它就不会向下推内容。这样你的div就可以占据整个页面。

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

.container {
    height: 100%;
    width: 100%;
}

.header {
    padding: 10px;
    background: dodgerblue;
    width: 100%;
    color: #fff;
  position: absolute;
}

.content {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background: ivory;
}

.contentData {
    padding: 20px;
    margin: 20px;
    border: 1px solid silver;
}

<div class="container">
  <div class="header">
    Header Title
  </div>
  <div class="content">
    <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-06-25

eiee3dmh4#

所以我想出来了，以防其他人也有这个问题。通过使用flex: 1;属性，我们可以让.content div只填充剩余的垂直空间。这确保了任何标题或顶部元素不会将.content数据“推”到滚动范围之外。

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
    overflow: clip;
}

.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column;
  overflow: hidden;
}

.header {
  padding: 10px;
  background: dodgerblue;
  width: 100%;
  color: #fff;
}

.content {
  flex: 1;
  width: 100%;
  height: 100%;
    
  overflow-y: scroll;
  background: ivory;
}

.contentData {
  padding: 20px;
  margin: 20px;
  border: 1px solid silver;
}

table tr td {
  padding: 100px 50px 100px 50px;
  background: rgba(0, 0, 0, .25);
  color: #fff;
}

<div class="container">
  <div class="header">
    Header Title
  </div>
  <div class="content">
    <div class="contentData">
      Donec mollis hendrerit risus. Etiam imperdiet orci. Maecenas egestas arcu quis ligula mattis placerat. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
    </div>
    <div class="contentData">
      <table>
        <tbody>
          <tr>
            <td>
              Donec mollis hendrerit risus. Etiam imperdiet orci. Maecenas egestas arcu quis ligula mattis placerat. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
            </td>
          </tr>
          <tr>
            <td>
              Donec mollis hendrerit risus. Etiam imperdiet orci. Maecenas egestas arcu quis ligula mattis placerat. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
            </td>
          </tr>
          <tr>
            <td>
              Donec mollis hendrerit risus. Etiam imperdiet orci. Maecenas egestas arcu quis ligula mattis placerat. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
            </td>
          </tr>
          <tr>
            <td>
              Donec mollis hendrerit risus. Etiam imperdiet orci. Maecenas egestas arcu quis ligula mattis placerat. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
            </td>
          </tr>
          <tr>
            <td>
              Donec mollis hendrerit risus. Etiam imperdiet orci. Maecenas egestas arcu quis ligula mattis placerat. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
            </td>
          </tr>
          <tr>
            <td>
              Donec mollis hendrerit risus. Etiam imperdiet orci. Maecenas egestas arcu quis ligula mattis placerat. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
            </td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
</div>

赞(0）回复(0）举报 2023-06-25

我来回答

css 无法滚动到容器div的底部

4条答案

相关问题

热门标签

最新问答