如何让滚动条向下移动到我选择的父元素

时间:2017-01-20 13:47:19

标签: html css

我在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"元素。

如何让子元素内部溢出以向下移动到我选择的父元素,这样我总能得到我想要的滚动条?

1 个答案:

答案 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>