CODEWITHSUNDEEP
htmlcss
Johnny
Johnny

Reputation: 73

Auto adjust div height with CSS

Let's say there is six divs one on the other.

1st, 2nd and 3rd div has a fixed height e.g. 25px, 100px and 25px. 4th div is content area and should be an auto adjusting div. 5th div has some content and the min-height is 100px (height is NOT fixed). 6th div is a footer has a fixed height e.g. 25px.

5th and 6th divs should be always on the bottom of the page (NOT sticky)

There is no problem when the 4th div (div_auto_height) has a lot of content and the page is just as long or longer than the screen.

The problem occurs when the page is shorter than the screen and the empty space comes after the 6th div. Then the 5th and 6th div are not where they supposed to be.

This is the normal case

The problem would be solved if one can get the height of the 4th div (div_auto_height) automatically adjusted to fill the empty space.

This is what we need to have

I have been trying to solve this problem in many ways without a decent solution.

Not working solutions:

Here is a template for your modification:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>No title</title>
<style type="text/css">

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}

#div1 {
    height: 25px;
    background-color: #123456;
}

#div2 {
    height: 100px;
    background-color: #345678;
}

#div3 {
    height: 25px;
    background-color: #567890;
}

#div_auto_height {
    height: auto ;
    background-color: #789012;
}

#div5 {
    min-height: 100px;
    background-color: #901234;
}

#div6 {
    height: 25px;
    background-color: #123456;
}

</style>
</head>
<body>
    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
    <div id="div3">Div 3</div>
    <div id="div_auto_height">This div should adjust automatically</div>
    <div id="div5">Div 5</div>
    <div id="div6">Div 6</div>
</body>
</html>
</body>
</html>

Upvotes: 6

Views: 27663

Answers (4)

crazyjune
crazyjune

Reputation: 359

change

#div_auto_height {
   height: auto ;
   background-color: #789012;
}

to

#div_auto_height {
   height: 100% ;
   background-color: #789012;
}

or maybe you need this:

#div_auto_height {
   height: calc(100% - 275px); ;
   background-color: #789012;
}

Upvotes: 0

Wex
Wex

Reputation: 15715

This might not be the most viable solution for you, but if you know a max-height for the 5th and 6th div, you can use position: absolute and padding (set to the max-height value) to achieve your result:

<div id="wrapper">
    <div class="div-25"></div>
    <div class="div-100"></div>
    <div class="div-25"></div>
    <div id="content">
        <div class="fluid">

        </div>
    </div>
</div>
<div id="container">
    <div class="footer">
        <div class="div-25"></div>
    </div>
</div>

CSS:

html, body { 
    margin: 0; 
    height: 100%; }
div { width: 100%; }
#wrapper { min-height: 100%; }
.div-25 { 
    background: green;
    height: 25px; }
.div-100 { 
    background: grey;
    height: 50px; }
#content { padding: 0 0 150px; } /* Max Height */
.fluid { 
    background: red;
    height: 100px; }
#container { position: relative; }
.footer { 
    background: blue;
    position: absolute;
    bottom: 100%;
    min-height: 100px; }

Preview: http://jsfiddle.net/Wexcode/jzdDU/

Upvotes: 0

Adam Arold
Adam Arold

Reputation: 30578

I believe that you should use javascript to solve this problem. There are a lot of easy-to-use javascript frameworks out there like jquery.

What you should do:

  • give an id to your divs.
  • using those ids find your divs - except for the fourth - and calculate their height
  • get the height of the window
  • set the 4th div's height by substracting the window height from the sum of your other divs height

And that's all! Tell me if you need some code.

edit: I didn't find the code but I remember that I used jquery dimensions. You can find example codes there!

Upvotes: 3

Mr Lister
Mr Lister

Reputation: 46619

There is no CSS way to give a property the value "total screen height - some fixed pixels". Use Javascript.

Upvotes: 2

Related Questions