All geek questions in one place

Automatically adjust div height with CSS

Let's say there are six divs on top of each other.

1st, 2nd and 3rd divisions have a fixed height, for example. 25px, 100px and 25px. The 4th div is the content area and should be an automatically custom div. The 5th div has some content, and the minimum height is 100 pixels (the height is NOT fixed). 6th div - the footer has a fixed height, for example. 25px.

The 5th and 6th div should always be at the bottom of the page (NOT sticky)

No problem if the 4th div (div_auto_height) has a lot of content and the page is also longer or longer than the screen.

The problem occurs when the page is shorter than the screen, and white space appears after the 6th div. Then the 5th and 6th divins are not where they were supposed to be.

This is the normal case

The problem will be solved if you can automatically increase the height of the 4th div (div_auto_height) to fill the empty space.

This is what we need to have

I tried to solve this problem in different ways without a decent solution.

Broken solutions:

  • There are different screen resolutions, so min-height does not work with large screens, without making the page very long for small or wide screens.
  • I was not able to set the properties of the top and bottom positioning correctly because it makes divs 5 and 6 on top of the 4th div (div_auto_height)

Here is the 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>
+6
source share
4 answers

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

+2
source

I believe you should use javascript to solve this problem. There are many easy to use javascript frameworks like jquery.

What you should do:

  • specify the id of your divs.
  • using these identifiers, find your divs - except the fourth - and calculate their height
  • get window height
  • set 4th div height by subtracting window height from the sum of your other divs heights

And it's all! Tell me if you need a code.

edit: I did not find the code, but remember that I used jquery options . Here you can find sample codes!

+3
source

This may not be the most effective solution for you, but if you know max-height for the 5th and 6th div, you can use position: absolute and padding ( 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/

0
source

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; }
0
source

Source: https://habr.com/ru/post/905564/

More articles:


All Articles