溢出隐藏的滚动Y切断内容

Question

我粘贴了以下代码。似乎标题元素的添加导致内容从滚动的底部被切除。如果删除标题元素，则不会截断任何内容。标题会随机播放并影响下一个元素。

Screenshot here

HTML

<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%;
}

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

Answer 1

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

将溢出y更改为滚动

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>

Answer 3

发生错误是因为您将内容高度设置为100％，所以它采用了其父包装的高度，但是包装还包含标题div，该div占据了100％高度的某些区域，因此滚动条滚动为高度：（ wrapper-标题高度）。所以，试试这个：

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

Answer 4

由于您在主容器中添加了隐藏内容， 在主容器中添加滚动条。

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

Answer 5

好吧，height: 100%;元素上的.content加上 的高度{将在父元素中被切除隐藏溢出并且为100％高-仅仅是因为100％加上其他任何东西加起来超过100％=>导致溢出，由于.title而被切断。