w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
CSS top div to adjust height automatically

I would tweak as follows to provide the sort of functionality you want:

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

The tweaks include fixing the size of the Kendo Window and adding an inner div with fixed height and overflow-y scrolling for the top panel.

I hope this helps...





© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.