我在div里面有一个div。就像下面的代码片段一样:
*
{
overflow: hidden;
}
.body
{
height: 300px;
width: 300px;
border: 1px solid black;
}
.header
{
height: 50px;
width: 300px;
}
.page
{
height: 198px;
width: 298px;
border: 1px solid green;
overflow: auto;
}
.container
{
}
.table
{
height: 96px;
width: 396px;
border: 1px solid blue;
}
<div class="body">
<div class="header">
</div>
<div class="page">
<div class="container">
<div class="table">
</div>
</div>
</div>
</div>
在这里,我希望只要需要滚动条,"page"
元素就是滚动条所在的位置。这就是除了overflow: hidden;
元素之外,所有内容都设置为"page"
的原因。现在这不适用于宽度溢出并被剪裁 - 请注意,所有高度溢出都按照预期的方式工作,并在正确的"page"
元素上提供滚动条。
将overflow: auto;
设置为"container"
元素也没用,因为滚动条位于该元素上,而不是父"page"
元素。
如何让子元素内部溢出以向下移动到我选择的父元素,这样我总能得到我想要的滚动条?
答案 0 :(得分:2)
如果我正确地理解了你的问题,那么滚动不起作用的原因是因为overflow:hidden
,该属性意味着元素宽度之外的所有内容都将被完全隐藏,因此无法滚动到。
解决方法是将overflow:visible
设置为除page
元素以外的所有内容,这意味着溢出的所有内容仍然可见,但具有此属性的元素将不具有自己的滚动条。
以下是您编辑的代码段,我认为它可以达到您想要的效果,希望有所帮助:
.body
{
height: 300px;
width: 300px;
border: 1px solid black;
}
.header
{
height: 50px;
width: 300px;
}
.page
{
height: 198px;
width: 298px;
border: 1px solid green;
overflow: auto;
}
.container
{
}
.table
{
height: 96px;
width: 396px;
border: 1px solid blue;
}
<div class="body">
<div class="header">
</div>
<div class="page">
<div class="container">
<div class="table">
</div>
</div>
</div>
</div>