CSS: Create the height of the inner div 100% when the parent is already 100%

Question

I tried it on my own for so long, and all the messages that I read and sorted so far have not helped me, so I hope one of you guys can give me a hint:

I have a layout consisting of a header, footer and content. This layout is stretched across the page in height (it took me some time to understand). So far, so good. But now I want to stretch the content-div as far as possible, right up to the start of the footer. No matter what I do, it does not work, it either saves the length of the text in it, or becomes the size of the whole window, hiding the footer and creating a scroll bar. I read about the solution by making it position:absolute , but I don't want that.

Here is an example: http://jsfiddle.net/N9Gjf/1/

You really help me!

Here is the css:

 html, body { height:100%; text-align:center; } #wrapper { min-height:100%; height:100% overflow: hidden; width:800px; margin: 0 auto; text-align: left; background-color:lightblue; } #footer { background-color: silver; height:1.5em; width:800px; margin: -1.5em auto; } #header { background-color: orange; height:100px; } #content { background-color: limegreen; } * { margin:0; padding:0; } 

And here is the html:

 <div id="wrapper"> <div id="header"> <p>Header</p> </div> <div id="content"> INHALT </div> </div> <div id="footer"> <p>Footer</p> </div> 

Answer 1

http://jsfiddle.net/calder12/CprV7/

In the wrapper you did not have a half-column after the height. You also want to set the height and minimum height of the content to 100%.

 #wrapper { min-height:100%; height:100%; overflow: hidden; width:800px; margin: 0 auto; text-align: left; background-color:lightblue; } #content { background-color: limegreen; height:100%; min-height:100%; } 

Answer 2

I believe that relative absolute positioning is the best solution (I admit that I can’t find a way to make the height total to 100%). Here is what you need to do:

Demo number 1

• Make relative wrapper layout
• Put all div inside shell
• Use absolute positioning to position and size content and footer; use one of the following:
  • Do not specify height div; specify top and bottom
  • Specify either top or bottom , but not both; specify height

An alternative method is to use negative fields. It may be a brain twister, but as soon as you understand the idea, it will become simpler than positioning. Here is what you need to do:

Demo number 2

• Assign heights to the header and footer
• Assign 100% height to content
• Use negative margins for content so that (i) the content clicks on the header (ii) extends the footer
• Use z-index positioning to display the title in the "front" of the content
• Use the div div to move the content inside the div content below the title

Answer 3

 #wrapper { min-height:100%; height:100%; /*missed the semicolon here*/ overflow: hidden; width:800px; margin: 0 auto; text-align: left; background-color:lightblue; position:relative } 

Now it works demo

Answer 4

You have a wrapper bug:

 #wrapper { min-height:100%; height:100%; overflow: hidden; width:800px; margin: 0 auto; text-align: left; background-color:lightblue; } 

You forgot to put ; at the end of height:100% .

Try it and you will see that it will work