设置溢出:自动,但不显示水平滚动条

Question

为什么不用id"shouldHaveScrollBar"的div不显示水平滚动条:

<div style="overflow:hidden; 
            width: 300px; height: 300px; background-color:blue; color:white">

    <div>Some stuff</div>
    <div>Some other stuff"</div>
    <div id="shouldHaveScrollBar" 
         style="background-color:grey; 
                width: 100%; height: 100%; overflow-x:auto">
      <input type="text" size=200">
    </div> 
</div>

谢谢,

Answer 1

因为您的水平滚动条隐藏在y溢出中.

shouldHaveScrollBar设置为100%高度,这是它的父级的100%,因此高度为300px.不幸的是,其他2个div"Some stuff"等将其推下来,这意味着你底部的滚动条被overflow:hidden你父div的隐藏.

将高度更改shouldHaveScrollBar为50%,您将看到我的意思.在这种情况下,您的身高应该是固定的像素高度而不是百分比,或者您的其他div需要设置为百分比,以使您的子div的总数<= 100%.