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