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>

kei · Accepted Answer · 2014-08-13T14:06:17.693

21

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

edited Aug 13 '14 at 14:06

answered Jun 21 '11 at 21:14

kei

20,157
2
35
62

2

Thanks, that seems to do it. Amazing how something so simple is such a pain. – NullReference Jun 21 '11 at 21:25
2

thanks. i never thought of absolutely positioning the content div before. +1 – Antony Scott Sep 04 '12 at 11:59
1

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. – Chris Middleton Oct 20 '15 at 14:12
@kei what if there is no clear separation between header and content. any reference links please. for e.g. https://forums.asp.net/t/2112870.aspx?GridMVC+Header+Freeze – singhswat Dec 30 '16 at 23:23

wener · Answer 2 · 2013-07-24T19:53:38.287

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

score 2 · Answer 3 · answered Jun 21 '11 at 21:09

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/

score 1 · Answer 4 · answered Jun 21 '11 at 21:04

1

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.

answered Jun 21 '11 at 21:04

bryanegr

351
2
5

score 1 · Answer 5 · answered Jun 21 '11 at 21:05

1

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.

answered Jun 21 '11 at 21:05

alquatoun

580
1
5
19

score 0 · Answer 6 · answered Jul 06 '12 at 09:24

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.

CSS layout for fixed header and 100% content height?

6 Answers6