Help placing a dhtmlxLayout within a page

Suite and Optimus Suite 5
#1

Hello,
I have created a sample that uses DIV’s and CSS to create an overall container whereby there is a top “title bar” and a bottom “footer bar” that are of fixed height and “stick” to the top and bottom of the browser window as it’s resized. Between these two is a “content” DIV into which I want to place a dhtmlxLayout. I can do so, but it seems the layout ends up always being taller than the available space. I would like the layout to always size to fill the available space between the header and footer DIV’s in my sample. What do I have to change in the code below to make it work this way?

Thanks!
Paul

— sample_style.css —
html,body {
margin:0;
padding:0;
height:100%;
width:100%;
background:#RE;
overflow:hidden;
font-family:Verdana,sans-serif;
font-size:14px;
color:#666;
}

div#container {
position:relative;
margin:0 auto;
width:100%;
background:#FFFFFF;
height:auto !important;
height:100%;
min-height:100%;
}

div#header {
padding:0em;
height: 100px;
background:#ddd;
border:1px solid #697899;
}

div#content {
border-right:1px solid #697899;
border-left:1px solid #697899;
border-bottom:1px solid #697899;
background-color:#F5F5F5;
min-height: 95%;
height: auto !important;
height: 95%;
margin: 0 auto -100px;
vertical-align:bottom;
}

div#footer {
height:20px;
padding:5px;
position:absolute;
bottom:0;
width:100%;
background:#ddd;
border:1px solid #697899;
}

— sample.html ----

Test Layout
HEADER
FOOTER
#2

Hello,

Please have look at the sample dhtmlxLayout/samples/02_conf/inc/header_footer.html that shows how to create a full-screen layout with header and footer.

window.location.reload(true) is not the best approach to resize layout. You may try the following instead:

#3

Thank you Alexandra!