0

有 2 个 div -top和bottom.

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

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

http://jsbin.com/UrasoKi/3/edit

<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定位。滚动条应仅出现在顶部面板。

元素必须位于小提琴内部 <div id='w'/>（因为Telerik kendo窗口调整大小手柄）并且可以调整大小，因此任何额外的音量都将提供给顶部窗格。但是可以将额外的 div 添加到其中（进入div id="w"）

我一直在尝试玩几个小时，但缺少一些东西。

4

2 回答 2

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>

调整包括固定剑道窗口的大小，并为顶部面板添加一个具有固定高度和溢出-y 滚动的内部 div。

我希望这有帮助...

于 2013-10-15T14:01:18.543 回答
0

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

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

于 2013-10-15T14:16:30.807 回答