0

See http://jsfiddle.net/oedev/pag7ahz2/

I have the following page layout:

  • cMain - main page container
  • cBanner - banner container
  • cNavigation - navigation container
  • cContent - page content container

All these are sized at 100%, as I want the page content to be sized at 100% (apart from the banner).

html, body {
    height: 100%;
}

#cMain {
    height: 100%;
}

#cBanner {
    background: #002d62 top center no-repeat scroll;  
    height: 200px; 
    margin-bottom: 1em; 
    margin-top: 1em;    
}

#cContent {
    height: 100%
}

I have set the height of the html, body and containing divs to 100%.

However, as I have a header logo and navbar, the div under these is not being sized at 100% (I'm ending up with a scroll bar).

If I remove the header and nav bar divs, the content div is sized @ 100% with no scroll bars.

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
OEDev
  • 98
  • 8

1 Answers1

0

Remove the height from the body tag.

html {
    height: 100%;
}

Or set an min height for the body as shown in this post: Make body have 100% of the browser height

html {
    height: 100%
}
body {
    min-height: 100%;
}
Community
  • 1
  • 1
Raldo94
  • 328
  • 3
  • 13
  • Thanks, removing the 100% height on the html tag works to an extent, in that it removes the scroll bars. Within my content container div, I host a Kendo ui grid, which includes paging controls. If I expand the size of my window, I would expect these to shift to the bottom of my window. This is not happening. Based on this example here: http://jsfiddle.net/dimodi/SDFsz/ – OEDev Aug 03 '15 at 13:48