3

I am currently trying to build a website with a banner of a fixed height (100px) at the top, and I want the rest of the content to fill the rest of the page. I have it so that I have the banner is in a div, and the rest of the page in another div, and I want the rest of the page to be the height less 100px (100% - 100px). Obviously you cannot mix % and px when it comes to height. However, is it possible to define a variable to be the widow height (100%) minus the banner height (100px) and then use this to define the height of my remaining div.

I am new to css, html and hardly know any other languages, so please try to keep answers simple, as I am a simple person!

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
David Ward
  • 185
  • 2
  • 9
  • What does it mean when you say you need to define the height to be 100%-100px? Is one of those a minimum, and the other a max? – thatidiotguy Sep 27 '12 at 20:23
  • I believe this would be the same as this other [question][1]. [1]: http://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels – Ozzyberto Sep 27 '12 at 20:31
  • Thank you for all of your responses. Ozzyberto's link to another thread led me to having each of the side menu and content div as `position:fixed` with the following settings `top:100px; bottom:0;`. They were sitting inside my containing div which had `height:100%` and my body also had `height:100%`. – David Ward Sep 28 '12 at 23:19

5 Answers5

2

Height is dynamic so that as you add content to your "content section", so will the size of the contianer thats holding it.

The short answer is, dont set a height for your "content section".

Dan Kanze
  • 18,485
  • 28
  • 81
  • 134
  • Unfortunately not setting a height doesn't work. However, I have found a solution (see the comment after my initial question). – David Ward Sep 28 '12 at 23:17
0
<div style="height: 100px">
   Your banner
</div>
<div>
  Body
</div>
HelloWorld
  • 4,251
  • 8
  • 36
  • 60
0

You can just use 100% as the height of your content div - it will stretch to take up the space from your banner to the bottom of the screen.

An important part is to set the height of html and body to 100%:

HTML

<html>
    <head>
        <title>Foo</title>
    </head>

    <body>
        <div id="banner"></div>
        <div id="content"></div>
    </body>
</html>

CSS

#banner {
    height: 100px;
    background-color: #ccc;
}

#content {
    height: 100%;
    background-color: #000;
}

body {
    height: 100%;
}

html {
    height: 100%;
}

See demo here: http://jsfiddle.net/yHFjh/

Jim
  • 2,300
  • 1
  • 19
  • 43
0

Create a html and body of height 100%. Position the banner absolute. Add a content div below your banner and set it's min-height to 100%. This content will be behind the banner, but will be at least 100%. Add a div in the content with a padding-top of the height of the banner to prevent content to end up underneath the banner.

HTML:

<div id="banner"></div>
<div id="content">
    <div id="main">
        Lorem Ipsum is simply dummy text..
    </div>
</div>​

CSS:

html, body { height: 100%; }
#banner { position: absolute; height: 100px; width: 100%; background: green; }
#content { min-height: 100%; background: yellow; }
#main { padding-top: 100px; }​

http://fiddle.jshell.net/pY6dc/

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
0

Use window.innerHeight / document.documentElement.clientHeight property

<div id="banner">banner</div>
<div id="content">content</div>

<script>
    if(navigator.userAgent.toLowerCase().indexOf("msie") > -1){
        document.getElementById("content").style.height = document.documentElement.clientHeight - document.getElementById("banner").offsetHeight + "px";
    } else {
        document.getElementById("content").style.height = window.innerHeight - document.getElementById("banner").offsetHeight + "px";
    }
</script>
Krishna Kumar
  • 2,101
  • 1
  • 23
  • 34