溢出隱藏滾動-y 切斷內容

Question

我已經粘貼了下面的代碼。 似乎添加標題元素會導致內容從滾動底部被截斷。 如果我刪除標題元素，則不會截斷任何內容。 標題隨機播放並影響下一個元素。

截圖在這里

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

將overflow-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內容的高度，這樣它就不會被切斷。

代碼片段（使用計算）：

 .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，它占據了 100% 高度的某些區域，因此滾動條滾動高度：（包裝器高度標題）。 所以，試試這個：

.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加上.title元素的高度將在隱藏溢出且 100% 高的父級中被截斷 - 只是因為 100% 加上其他任何東西加起來超過 100% => 導致溢出，這將由於overflow: hidden 。