窗口上的滚动条只调整一个div，用于多div垂直布局

我已经在这里呆了几天，阅读了关于CSS，溢出和布局的每篇可以想到的文章。窗口上的滚动条只调整一个div，用于多div垂直布局

我有一个带横幅的页面（位置：绝对），下面是一个包含两个块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>

** **理发

这里的砍倒在核心本质的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; }

来源

2012-03-10 Danny

究竟是你面临的问题？代码 '＃probesCT2 { width：200px; 身高：60％; margin：0 30px 50px 30px; padding：0 10px 10px 10px; } #pTbl {overflow-y：auto;身高：70％; }' 适合我 – redDevil 2012-03-10 11:04:13

对于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元素才能达到此效果。我还不得不猜测一些高度定位的元素顶部清除您的标题。

来源

2012-03-10 19:57:43 ScottS

窗口上的滚动条只调整一个div，用于多div垂直布局

回答

相关问题