Question

我已经好几天了，并且阅读了关于css，溢出和布局的所有可想到的文章。

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

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

我已经阅读了关于确保所有包含元素都设置了高度的帖子，我已经在所有正确的位置设置了 overflow-y：auto 。只是不工作。

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

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

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

丹尼

MARKUP

标记非常简单：

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

** STYLING **

这里的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; }

Answer 1

要让overflow-y: auto工作并制作滚动条，div必须设置特定的高度。所以in this example（使用上面的html）我将其设置为200px，这比显示没有滚动条的内容所需的空间小，因此显示了一个滚动条。但是，如果设置为100% it does not work，因为1）您需要取消注释包含div的高度，并且2）您div中的内容小于填充div高度所需的内容，所以没有滚动条出现。添加了更多内容，you get a scroll bar。

我认为你真正想要的是确保你总是有一个滚动条，如果需要，但即便如此，你需要确保div不会延伸到页面底部以下或者你仍然可能有滚动问题酒吧本身离开了页面。 I've configured something可能更符合您的意图，但请注意，我必须使用多个嵌套的relative或absolute元素来实现此效果。我还必须猜测元素顶部的高度定位以清除标题。

窗口上的滚动条仅在多重垂直布局中调整一个div的大小

1 个答案: