溢出隐藏滚动-y截断内容

Question

我已经粘贴了以下代码。似乎添加title元素会导致内容从滚动条底部被截断。如果我删除title元素，则不会截断任何内容。title会下移并影响下一个元素。 这里有屏幕截图

<div class="wrapper">
  <div class="title">
    Title
  </div>
  <div class="content">
    Some long content here...
  </div>
</div>

CSS

.wrapper {
  border: 0;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

.title {
  text-align: center;
  color: white;
  padding: 5px 0;
  position: relative;
  margin: 0;
  background: #000;
}

.content {
  overflow-y: auto;
  height: 100%;
}

如果将盒子阴影和边框半径添加到包装元素中，这会导致进一步的奇怪行为（如果同时将溢出隐藏从包装器中删除）。

- aprilone

---

你想要实现什么？ - Niteesh

什么问题？ - Niteesh

@Niteesh 看一下截图，最后一行被切掉了。 - mozkomor05

@Niteesh 我想解决滚动问题。截图显示尽管滚动条在底部，但内容仍然不可见。 - aprilone

Answer 1

发生错误的原因是你将内容高度设为了100%，所以它会占据其父包装器的高度，但包装器也包含标题div，该div会占用一些100%高度的区域，因此滚动条会滚动到高度：(包装器高度-标题的高度)。所以，请尝试这样：

.content {
  overflow-y: auto;
  height: calc(100% - 30px);
}

- Niteesh

---

@aprilone，错误发生是因为您将内容高度设置为100％，因此它会采用其父包装器的高度，但包装器还包含占用100％高度某些区域的标题div，因此滚动条滚动的高度为：（包装器高度-标题高度）。 - Niteesh

请不要使用注释来完成答案，只需编辑即可！;-) - Vi100

Answer 2

.wrapper 的溢出被隐藏了，因此截断了子内容的内容。只需删除 overflow:hidden，它就会按照您想要的方式运行。

代码片段：

.wrapper {
  border: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

.title {
  text-align: center;
  color: white;
  padding: 5px 0;
  position: relative;
  margin: 0;
  background: #000;
}

.content {
  overflow-y: auto;
  line-height: normal;
  height: 100%;
}

<div class="wrapper">
  <div class="title">
    Title
  </div>
  <div class="content">
    Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...
  </div>
</div>

如果由于某些原因无法删除overflow: hidden，则可以使用calc计算内容的高度，以避免被截断。

代码片段（使用calc）：

.wrapper {
  border: 0;
  position: fixed;
  overflow: hidden;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

.title {
  text-align: center;
  color: white;
  padding: 5px 0;
  position: relative;
  margin: 0;
  background: #000;
}

.content {
  overflow-y: auto;
  line-height: normal;
  height: calc(100% - 26px);
}

<div class="wrapper">
  <div class="title">
    Title
  </div>
  <div class="content">
    Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...
  </div>
</div>

- mozkomor05

---

这看起来像是正确的答案。尽管，如果我在包装器上使用边框半径和盒子阴影进行一些进一步的样式处理，那么就没有圆角，并且盒子阴影会短于底部。 - aprilone

什么意思？你能发个截图吗？如果你不能删除 overflow: hidden ，我会更新我的回答。但我不建议你使用第二种解决方案，尽可能避免使用 calc。 - mozkomor05

我已经在原始帖子中添加了第二张截图。 - aprilone

Answer 3

嗯，height: 100%; 在 .content 上加上.title元素的高度将会在父元素中被剪切，因为父元素隐藏了溢出并且高度为100％ - 只是因为100％再加上其他任何东西都会超过100％ => 导致溢出，由于overflow: hidden而被剪切。

- Johannes

Answer 4

  overflow-y: scroll;
  height: 100%;
}

将overflow-y更改为scroll

- Josh543

Answer 5

因为您在主容器中添加了隐藏， 请在主容器中添加滚动条。

.wrapper {
  border: 0;
  overflow: scroll; /* change it */
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

- Pardip Lal