多格垂直布局中仅一个 div 的窗口调整大小的滚动条答案

【问题标题】：Scrollbar on window resize for only one div in multi-div vertical layout多格垂直布局中仅一个 div 的窗口调整大小的滚动条
【发布时间】：2012-03-10 10:44:40
【问题描述】：

我已经研究了好几天，并且阅读了所有关于 CSS、溢出和布局的文章。

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

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

我已阅读有关确保在所有包含元素上设置高度的帖子，我已在所有正确的位置设置 overflow-y: auto。就是不行。

包含的 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; }

【问题讨论】：

您面临的具体问题是什么？代码#probesCT2 { width: 200px; height: 60%; margin: 0 30px 50px 30px; padding: 0 10px 10px 10px; } #pTbl { overflow-y: auto; height: 70%; } 适合我

标签： css scrollbar vertical-scrolling window-resize

【解决方案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 元素来实现效果。我还必须猜测元素顶部的一些高度定位以清除您的标题。

【讨论】：