Question

我的DIV结构如下：

<DIV id="main">
   <DIV id="header">
   </DIV>
   <DIV id="inside">
   </DIV>
</DIV>

这就是布局

|________________|
|                |
|  |----------|  |
|  |  header  |  |
|  |          |  |
|  |----------|  |
|                |
|  |----------|  |
|  |  inside  |  |
|  |          |  |
|__|__________|__|
   |          |   
   |          |   
   |          |   
   |----------|

主 div的固定高度为300px，我将div设置如下，以便不显示额外内容

#main{
   height: 300px;
   overflow: hidden;
}

标题 div没有任何样式，因为它只是一行，里面有<SPAN>。

div 里面实际上是溢出了它的内容，但我没有看到滚动条滚动内容。我将div设置如下：

#inside{
   overflow-y:auto;
}

如果内容溢出，则标题应保留在那里并且内部div应显示垂直滚动条。我怎样才能做到这一点？

Answer 1

如果您为父标记提供固定高度，那么您也必须对内部标记执行某些操作。

给出固定高度，给出高度等等。

所以这里有codepen来为你解答。

#main{
  height: 300px;
  overflow: hidden;
}
#header
{
  width:100%;
  height:25px;
}
#inside{
  overflow:auto;
  height:275px;
}

<DIV id="main">
  <DIV id="header">
    <span>title</span>
  </DIV>
  <DIV id="inside">
    dsfdsfds
    <br/>
    ff
    <br/>
    sdf
    <br/>
    dsf
    <br/>
    dsf
    <br/>
    ds
    <br/>
    fsd
    <br/>
    fsd
    <br/>
    fds
    <br/>
    feds
    <br/>
    rewr
    <br/>
    few
    <br/>
    re
    <br/>
    rf
    <br/>
    dsf
    <br/>
    dsf
    <br/>
    dsf
    <br/>
    ds
    <br/>
    fds
    <br/>
    fsd
    <br/>
    fds
    <br/>
    f<br/>
    dsf
    <br/>
    dsf
    <br/>
    d
  </DIV>
</DIV>

Answer 2

<强>尝试：

#main{
   height: 300px;
   overflow: hidden;
}
#inside{   
    height: 300px;
    overflow-y: scroll;
}

Answer 3

<pre><style>
#main{
   height: 300px;
   overflow-y: scroll;
}
</style>
</pre>

Answer 4

您需要为inside div定义高度，以使其可滚动，如下所示：

#inside{
 overflow-y:scroll; /* scrolls when content overflows */
 height: 100px;
}

使用overflow-y:scroll，剪辑内容并提供滚动机制。但只有在向height提供div时才会显示滚动条。一旦内容溢出，就会显示定义的高度滚动。

滚动内部DIV

4 个答案: