CSS layout for fixed header and 100% content height?

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>

Loraine

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;
}

Bills

Thanks, that seems to do it. Amazing how something so simple is such a pain. – Loraine

thanks. i never thought of absolutely positioning the content div before. +1 – Brackett

This answer is brilliant. This method works great for lots of cases where calc() seemed necessary. For example, if you wanted to do width: calc(100% - 20px);, just do position: absolute; left: 0; right: 20px; with a relatively-positioned container. This actually makes CSS usable for me. Thanks, kei. – Ancient

@Bills what if there is no clear separation between header and content. any reference links please. for e.g. forums.asp.net/t/2112870.aspx?GridMVC+Header+Freeze – Bernoulli

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/

Draught

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);
}

Overrate

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.

Spirited

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.

Collect

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.

Manasseh