当父级的身高为100%时,隐藏的溢出与嵌套的溢出滚动不起作用

时间:2019-06-27 18:25:25

标签: html css

我需要隐藏主体的上溢,以便在子元素具有上溢内容但其上溢设置为滚动时不破坏布局。我已经搜索了4个多小时,并尝试了所有我能想到的但没有成功的方法。

是否有一种方法可以真正做到这一点?没有 javaScript在运行时设置固定大小?

代码如下:

body
{
overflow: hidden;
}
#parent {
  background-color: blue;
  padding: 10px;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

#scroller {
  overflow: scroll;
  padding: 10px;
  background-color: red;
  height: 100%;
}

#child {
  height: 10000px;
  background-color: green;
}
<div id="parent">
  <div id="scroller">
    <div id="child">
      Overflowing content goes here...
    </div>
  </div>
</div>

https://jsfiddle.net/kn5xv0y3/9/

1 个答案:

答案 0 :(得分:1)

您忘记将height: 100%设置为htmlbody

html, body
{
overflow: hidden;
height: 100%;
}
#parent {
  background-color: blue;
  padding: 10px;
  height: 100%;
}

#scroller {
  overflow: scroll;
  padding: 10px;
  background-color: red;
  height: 100%;
}

#child {
  height: 10000px;
  background-color: green;
}
<div id="parent">
  <div id="scroller">
    <div id="child">
      Overflowing content goes here...
    </div>
  </div>
</div>