expand grid 100% its parent div, no other scrolls

205 views Asked by At

can you help me to fix this layout: https://i.stack.imgur.com/mHdlW.jpg

I'd like the grid will fill totally (hoizontally and vertically) its parent div without show me the outermost scrolbar(the window scollbar) The only scrollbar that i'd like to see are the those of the grid

the page has a kendoSplitter in the middle

this is my markup

<body>
    <img src="images/logo.png" />
    <h1>Archivio documentale</h1>
     <div id="horizontal" style="height: 100%; width: 100%">
            <div id="left-pane">
                <div class="pane-content" style="width:390px;">
                    <!-- LEFT SIDE CONTENT initial fixed width -->
                </div>
            </div>
            <div id="main-pane">
                <div class="pane-content">
                     <div id="mainGrid"></div>
                </div>
            </div>
      </div>
</body>
1

There are 1 answers

2
Diego Fortes On

You could use Viewports. There is vh (View Height) and vw (View Width). vh takes the height of the window dinamically, and vw takes the width of the window also dinamically.

Therefore, by applying the following:

div{
    height: 100vh;
    width: 100vw;
}

Your grid would always fit 100% no matter what.

Example: http://codepen.io/diego-fortes/pen/oYKpqK

I hope it helps :)