Question

有2个div - top和bottom。

底部应作为“按钮窗格”，因此始终可见并“固定”到底部边框。 root div是一个Kendo UI Window div（见jsbin小提琴）

问题是顶部div没有显示 ONLY 的滚动条，但是“按钮窗格”也是如此。在给定的jsbin中，垂直向下调整窗口大小，因此滚动条出现：

<style scoped>
    #top{
      min-height: 500px; 
      width: 100%; 
      background-color: blue
    }
    #bottom{
      height: 50px; 
      width: 100%; 
      background-color: green; 
      position: absolute; 
      bottom: 0px;
      /*kendo specific margin indentation, ignore*/
      margin: 0 0 0 -9px;
    }    
  </style>
 <div id="w">
  <div id="top">TOP PANE</div>
  <div id="bottom">BOTTOM PANE</div>
 </div>

我想用css实现明确的底部div定位。滚动条应仅显示在TOP面板中。

元素必须位于 INSIDE <div id='w'/>的小提琴中（因为telerik kendo窗口调整大小句柄）和 BE RESIZABLE ，所以任何额外的卷都将被赋予顶部窗格。但是可以在其中添加额外的div（进入div id="w"）

我一直在努力玩几个小时，有些东西不见了。

Answer 1

我会按如下方式进行调整，以提供您想要的功能：

<body>
  <style scoped>
    #top{
      height: 100%; 
      width: 100%; 

    }
    #bottom{
      height: 50px; 
      width: 100%; 
      background-color: green; 
      position: absolute; 
      bottom: 0px;
      /*kendo specific margin indentation, ignore*/
      margin: 0 0 0 -9px;
    }    
    #inner {
      overflow-y:scroll;
      height: 100%;
      background-color: blue
    }
  </style>
 <div id="w">
   <div id="top"><div id="inner">TOP PANE</div></div>  <div id="bottom">BOTTOM PANE</div>
 </div>
 <script>  
   $(document).ready(function() {
     $('#w').kendoWindow({
       width: '450px'
     });

     $('.k-window-content').css({'overflow':'hidden', scrollable: false })
   });
 </script>  
</body>

调整包括修复Kendo窗口的大小，并为顶部面板添加固定高度和溢出y滚动的内部div。

我希望这会有所帮助......

Answer 2

属性min-height: 500px;导致窗口显示滚动条。您可能希望将两个div放在另一个具有固定min-height的div中，然后将这两个div赋予固定的min-height

修改编辑你的小提琴，看看你是否需要它。 http://jsbin.com/efOgoVE/10/edit

CSS top div自动调整高度

2 个答案: