CODEWITHSUNDEEP
javascriptcssresizekendo-ui
Max
Max

Reputation: 1501

CSS top div to adjust height automatically

There're 2 divs - top and bottom.

The bottom should serve as a 'buttons pane', so visible and 'pinned' to bottom border at all times. root div is a Kendo UI Window div (see jsbin fiddle)

The problem is that the scrollbar is not being shown ONLY for the top div, but for 'buttons pane' as well. In the given jsbin resize down the window vertically, so the scrollbar appears:

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>

I would like to achieve clear bottom div positioning with css. Scrollbar should appear for TOP panel ONLY.

Elements MUST BE positioned INSIDE <div id='w'/> in fiddle (because of telerik kendo window resize handles) AND BE RESIZABLE, so any extra volume would be given to the top pane. But extra divs could be added into it (into div id="w")

I've been trying to play around for hours, something is missing.

Upvotes: 0

Views: 625

Answers (2)

Gaurav Bhor
Gaurav Bhor

Reputation: 1157

The attribute min-height: 500px; is causing the window to show a scrollbar. You would want to put the two divs in another div with a fixed min-height and then give the two divs a fixed min-height

Edit: Edited your fiddle, see if that is what you need. http://jsbin.com/efOgoVE/10/edit

Upvotes: 0

Neil Hibbert
Neil Hibbert

Reputation: 862

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

Upvotes: 1

Related Questions