0

这几天我一直在研究这个问题，并且阅读了所有关于 CSS、溢出和布局的文章。

我有一个带有横幅（position: absolute）的页面，下面是一个包含两个块 div 的 div。第二个块 div 又具有另一个包含文本的 div。

我希望在调整窗口大小时最里面的 DIV 显示一个滚动条。

我已经阅读了关于确保在所有包含元素上设置高度的帖子，我已经在所有正确的地方设置了溢出-y：自动。就是行不通。

包含的 DIV 如下所示：http: //i.imgur.com/oDHM4.png

我希望在调整浏览器窗口大小（仅限 y 方向）时滚动绿色部分。

任何设计中的可滚动 DIV 都非常有用……但不应该这么难。任何和所有的帮助表示赞赏。

丹尼

标记

标记非常简单：

<body>
    <div id="page-header" style='background:blue;'>page-header</div>
    <div id="page-content">
        <div id="configContent" style='height: inherit; background: steelblue;'>
            <h1 id='panTitle'>Panel Title</h1>
            <div id='panProbes' class='libPanel' style="background: maroon;">
                <p>panProbes</p>    
                <div id="probesCT1" class="configtable" style='background: red;'>
                    <p class='pTblTitle'>probesCT1</p>
                </div>
                <div id="probesCT2" class="configtable" style='background: grey;'>
                    <p>probesCT2</p>
                    <div id='pTbl' style='background: green;'>
                        <div class='pRow'>1st para in pTbl</div>
                        <div class='pRow'>some data</div>
                        <div class='pRow'>some data</div>
                        <div class='pRow'>some data</div>
                        <div class='pRow'>some data</div>
                        <div class='pRow'>some data</div>
                        <div class='pRow'>some data</div>
                        <div class='pRow'>some data</div>
                        <div class='pRow'>some more data</div>
                        <div class='pRow'>some more data</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

** 造型 **

这是 CSS 精简到核心本质：

html, body {    
    position:absolute;
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 1010px;
    overflow: hidden;
}

#page-header {
    position: absolute;
    left: 5px;
    top: 5px;
    height: 60px;
    width: 100%;
}

#page-content {
    width: 100%;
    height: 100%;
    margin-top: 95px;
}

#configContent {
    height: 100%;
    width: 300px;
    padding-left: 0px;
    border-width: 3px;
    margin-left: 30px;
    margin-right: auto;
}

.libPanel { height: 100%; }

#probesCT1 { width: 150px; margin: 0 auto 0 30px; }
#probesCT2 { 
    width: 200px;
    /* height: 100%; */
    margin: 0 30px 50px 30px;
    padding: 0 10px 10px 10px;
}

#pTbl { overflow-y: auto; }
.pRow { margin-bottom: 10px; }
4

1 回答 1

0

为了overflow-y: auto工作和制作滚动条，div必须设置特定的高度。所以在这个例子中（上面有你的 html）我将它设置为200px，这比在没有滚动条的情况下显示内容所需的空间要小，因此会显示一个滚动条。但是，如果设置为100% 它不起作用，因为 1）您需要取消注释包含 div 的高度，以及 2）您在该 div 中的内容小于填充 div 高度所需的内容，因此不会显示滚动条. 添加更多内容后，您将获得一个滚动条。

我认为您真正想要的是确保在需要时始终有一个滚动条，但即便如此，您也需要确保 div 不会延伸到页面底部以下，否则滚动条本身仍然会出现问题离开页面。我已经配置了一些可能更符合您的意图的东西，但请注意，我必须使用多个嵌套relative或absolute元素来实现效果。我还必须猜测元素顶部的一些高度定位以清除您的标题。

于 2012-03-10T19:57:43.870 回答