我需要隐藏主体的上溢,以便在子元素具有上溢内容但其上溢设置为滚动时不破坏布局。我已经搜索了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>
答案 0 :(得分:1)
您忘记将height: 100%
设置为html
和body
:
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>