CSS layout for fixed header and 100% content height? - css

Question

I'm trying to get a fixed height header and a content area the fills the screen. The content div contains a telerik mvc grid. I've tried a few suggested on stackoverflow but the control that is the content area always seems to size incorrectly because it doesn't take into account the header fixed height, so it will scroll the extra 40px if the header is 40px. Any suggestions?
<div id="header">
</div>
<div id="content">
<telerik mvc grid control>
</div>
Css
html,body
{
margin:0;
padding:0;
height:100%;
}
#header {
position:absolute;
height: 40px;
left:0;
top:0;
width:100%;
background:green;
}
#content {
position: absolute;
top:40px;
left:0;
width:100%;
height:100%;
background:#eee;
}
UPDATE:
Had to manually re-size the grid on load and window re-size.
Add
.ClientEvents(events => events.OnLoad("resizeGrid"))
<script type="text/javascript">
window.onresize = function () {
resizeContentArea($("#Grid")[0]);
}
function resizeGrid(e) {
debugger;
resizeContentArea($("#Grid")[0]);
}
function resizeContentArea(element) {
var newHeight = parseInt($(element).outerHeight(), 10) - parseInt($(".t-grid-header", element).outerHeight(), 10) - parseInt($(".t-grid-pager", element).outerHeight(), 10);
$(".t-grid-content", element).css("height", newHeight + "px");
}
</script>

Answer 1

DEMO
HTML
<div id="wrapper">
<div id="header">HEADER</div>
<div id="content">CONTENT</div>
</div>
CSS
html, body {
height:100%;
margin:0;
padding:0;
}
#wrapper {
width:400px; /*set to desired width*/
height:100%;
margin:auto;
position:relative;
}
#header {
height:40px; /* set to desired height*/
}
#content {
position:absolute;
bottom:0;
top:40px; /*must match the height of #header*/
width:100%;
overflow:auto;
}

Answer 2

You could place the #header element inside of the #content element, the content element will take 100% height.
Here's an example, HTML:
<div id="content">
<div id="header">
Header.
</div>
Content Area.
</div>
CSS:
body,html {
height:100%;
margin:0;
padding:0;
}
#header {
background:#666;
height:30px;
}
#content {
height:100%;
background:#999;
width:100%;
}
Demo:
http://jsfiddle.net/Rz2tN/

Answer 3

With box-sizing you can do like
http://jsfiddle.net/Wener/Vat4C/1/
No matter the header is in wrapper or out of wrapper, it will work.
Only add :
#wrapper
{
box-sizing: border-box;
padding-top: 40px;
margin-top: -40px;
}
#header
{
/* add this if header out of wrapper */
position: relative;
z-index: 9;
}
#content
{
/* remove
position:absolute;
bottom:0px;
top: 40px;*/
/* add */
height: 100%;
}
This is more flexible, the content's position is no absolute, but it need the box-sizing property.
About the box-sizing, I defined less function as fallow:
.box-sizing(#type: content-box) {
-webkit-box-sizing: #type; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: #type; /* Firefox 1+ */
box-sizing: #type; /* Chrome, IE8+, Opera, Safari 5.1*/
}
.border-box()
{
.box-sizing(border-box);
}

Answer 4

Set the outer to be 100% height, inside make your fixed with header, and auto height for the content should suffice.
to fix the scrolling, take a look at the overflow porperty. visible will prevent scrolling.

Answer 5

Put a 25px top-margin on the content div and make sure the content div does not include the header.
If the content div must include the header, create a new div for your grid using the same properties stated above.

Answer 6

For Vertical Scroll we can use the following and for horizontal scroll just use a div
<div class="DataGridXScroll">
#(Html.Telerik().Grid(listCustomerStatus)
.Name("grvSalesAdjustment")
.DataKeys(keys => keys.Add(k => k.CustCode))
.Columns(column =>
{
})
.Selectable()
.Pageable(page => page.PageSize(100))
.Scrollable(scroll => scroll.Height(300))
)
</div>
add the following CSS
.DataGridXScroll
{
width: 1000px;
overflow-x: scroll;
text-align:left;
}
This is work in Firefox and other browser. For IE just use the following CSS
.t-grid
{
position: static;
overflow:hidden;
}
.t-grid-content
{
overflow-x: hidden;
position:static;
width:100%;
}
.t-grid-header-wrap
{
position:static;
}
.t-grid-content
{
overflow-x: hidden;
}
.t-grid-footer-wrap
{
position:static;
}
This is a very Simple solution and I think every one enjoy it.