Menu
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.
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.
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>
766
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.
Syntax: height: length|percentage|auto|initial|inherit; Property Values: height: auto; It is used to set height property to its default value.
The content height of a div can dynamically set or change using height(), innerHeight(), and outerHeight() methods depending upon the user requirement.
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
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:
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!
162
There is no CSS way to give a property the value "total screen height - some fixed pixels". Use Javascript.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
