CODEWITHSUNDEEP
htmlcss
Boone
Boone

Reputation: 1056

Content area height 100% taking the header into account

I am trying to fill the length of the screen but my content area of 100% height ignores the header which then makes the area too long. The other SO solutions would not completely work.

I need to be able to adjust for growing content (with the scroll bar on the page not the #mainView), and when there is not enough content to fill the page, the #mainView should fill the screen (with no scrolling).

http://jsfiddle.net/SsF8S/6/

CSS:

html, body { height: 100%; margin: 0px; }
#container{margin:20px;height:100%}
#header { height: 80px; background: pink; }
#mainView { height: 100%; background: red; box-sizing: border-box; border:solid 4px pink;border-top:none; }

HTML:

<div id="container">
   <div id="header">
     --Header
   </div>
   <div id="mainView">
     --Main
   </div>
</div>

Upvotes: 0

Views: 120

Answers (4)

Pluto
Pluto

Reputation: 3026

A few small changes to your mainView's CSS...

Make it absolute, setting the top, left, bottom, and right properties. Then just remove the old height and change the overflow to add a scroll bar when needed.

#mainView {
    background:red;
    position:absolute;
    top:80px;
    bottom:0;
    right:0;
    left:0;
    overflow:auto;
}

And a jFiddle example: http://jsfiddle.net/SsF8S/2/

Upvotes: 1

Simon Arnold
Simon Arnold

Reputation: 16177

You should use box-sizing:
See http://jsfiddle.net/SsF8S/4/

CSS

html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}
#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: black;
    z-index: 1;
}
#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 80px 0 0 0;
    background: red;
    z-index: 0;
    overflow: hidden;
}
#mainView {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Html

<div id="header">
    --Header
</div>
<div id="wrapper">
    <div id="mainView">

    </div>
</div>

Upvotes: 1

Paul Roub
Paul Roub

Reputation: 36448

Let the header overlay the main view, and pad the top of the main view to avoid it:

#header {
  height:80px;
  background:black;
  position: absolute; 
  top: 0; 
  left: 0;
  width: 100%; 
}

#mainView { 
  height:100%; 
  background:red;
  padding-top: 80px;
  box-sizing: border-box;
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
}

Updated jsFiddle with this solution: http://jsfiddle.net/upQpj/

Upvotes: 1

the_lotus
the_lotus

Reputation: 12748

You could have a main container.

<style type="text/css">

html,body{height:100%;margin:0px;}
#header{height:80px;background:black;}
#container{height:100%; background:red;}

</style>

<div id="container">
<div id="header">
  --Header
</div>
<div id="mainView">
  --Main
</div>
</div>

Upvotes: 0

Related Questions