Fatal编程技术网
  • javascript/
  • Javascript CSS top div可自动调整高度

Javascript CSS top div可自动调整高度

javascript css kendo-ui

Javascript CSS top div可自动调整高度,javascript,css,resize,kendo-ui,Javascript,Css,Resize,Kendo Ui,有两个分区-顶部和底部 底部应作为“按钮窗格”，以便始终可见并“固定”到底部边框。根div是剑道UI窗口div（参见jsbin fiddle） 问题在于，滚动条不仅显示在顶部div，还显示在“按钮窗格”中。在给定的jsbin中，垂直向下调整窗口大小，以便显示滚动条： #顶{ 最小高度：500px； 宽度：100%； 背景颜色：蓝色 } #底部{ 高度：50px； 宽度：100%； 背景颜色：绿色； 位置：绝对位置； 底部：0px； /*剑道特定边距缩进，忽略*/ 边际：0-9px； }

有两个分区-
顶部
和
底部

底部应作为“按钮窗格”，以便始终可见并“固定”到底部边框。根div是剑道UI窗口div（参见jsbin fiddle）

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


#顶{
最小高度：500px；
宽度：100%；
背景颜色：蓝色
}
#底部{
高度：50px；
宽度：100%；
背景颜色：绿色；
位置：绝对位置；
底部：0px；
/*剑道特定边距缩进，忽略*/
边际：0-9px；
}    
顶窗格
底部窗格
我想用css实现清晰的底部div定位。滚动条只应出现在顶部面板上

元素必须以小提琴的形式放置在
内部（因为telerik剑道窗口的大小调整手柄），并且可以调整大小，因此任何额外的音量都会被赋予顶部窗格。但是可以在其中添加额外的div（到
divid=“w”
）

我已经尝试玩了几个小时了，但缺少了一些功能。

我将调整如下，以提供您想要的功能：

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


#顶{
身高：100%；
宽度：100%；
}
#底部{
高度：50px；
宽度：100%；
背景颜色：绿色；
位置：绝对位置；
底部：0px；
/*剑道特定边距缩进，忽略*/
边际：0-9px；
}    
#内在的{
溢出y：滚动；
身高：100%；
背景颜色：蓝色
}
上窗格下窗格
$（文档）.ready（函数（）{
$（'w'）。肯多文多({
宽度：“450px”
});
$（'.k-window-content'）.css（{'overflow'：'hidden'，scrollable:false}）
});
调整包括固定剑道窗口的大小，添加一个具有固定高度的内部div，以及顶部面板的overflow-y滚动

我希望这有助于…

属性
最小高度：500px导致窗口显示滚动条。您可能希望将两个div放在另一个具有固定
min height
的div中，然后给两个div一个固定
min height

编辑：
编辑你的小提琴，看看这是否是你需要的。

它必须可以调整大小。谢天谢地，好吧，我的错，我已经更新了我的代码以允许这个…@NeilHibbert，这是部分可接受的变体。窗口不仅仅是一些编辑表单，许多事情都发生在窗口/顶部窗格中，因此它应该具有滚动条，以便随时访问所有功能。再次感谢！这正是我最终得到的结果，我仍然试图修复滚动条，而滚动条在底部窗格后面丢失了。。边距和填充物很棘手。。

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