Place div in golden ratio: Alternative to absolute position? - html

Question

I have build a page like in this sample below. You can also play around with it on codepen.
The idea was, that the dark grey hero box is placed on the bottom of the viewport. So far so easy.
BUT if the screen is too small in height (e.g. for a small laptop), so that the text would fill most (or even all) of the viewport, the background image could hardly be realized. In this case the hero box should be placed in the golden ratio instead of the bottom of the viewport.
I have already build that solution in the sample as well. Just reduce the height of your browser window.
I just have the feeling that I am doing soemthing wrong in general. At the moment I am placing hero, content and footer in absolute positioned divs. It's working ok as long as there is only static content inside the #content div. But if there is for example an accordion or some other collapsing/dynamic stuff, the position of the footer has to be re-calculated.
I can easily do this in re-calling the ratio function. But meanwhile the whole solution does look wrong or maybe too complex to me.
Isn't there another and more easy solution to place the content div with a RELATIVE position after the hero container?
// call function after everything has been loaded
$(window).load(function() {
checkRatio();
});
window.dispatchEvent(new Event('resize'));
$(window).resize(function() {
checkRatio();
});
function checkRatio() {
var ratio = 0;
var contentTopPos = 0;
var footerTopPos = 0;
var windowHeight = $(window).height();
var headerHeight = $("#hero").height();
var contentHeight = $("#content").height();
ratio = (windowHeight / headerHeight);
contentTopPos = (windowHeight / 1.618);
if(ratio < 1.618) {
// Window too small or Content too long
$("#hero").css('bottom', 'initial');
$("#hero").css('top', contentTopPos);
} else {
// Default Position: bottom 0
$("#hero").css('top', 'initial');
$("#hero").css('bottom', 0);
}
var sumHeight = $("#hero").offset().top + $("#hero").height();
$("#content").css('top', sumHeight + "px");
footerTopPos = (sumHeight + contentHeight);
$("#footer").css('top', footerTopPos + "px");
}
body {
padding: 0;
margin: 0;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
#header_img {
position: fixed;
top: 0;
height: 100vh;
width: 100%;
background-size: cover;
z-index: 1;
}
#hero_container {
position: relative;
height: 100vh;
width: 100%;
}
#hero {
position: absolute;
margin: 0 5%;
bottom: 0;
width: 90%;
height: auto;
background-color: #333;
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.46);
z-index: 2;
}
#hero_text {
padding: 20px;
color: #fff;
}
#content {
position: absolute;
width: 100%;
background-color: transparent;
z-index: 3;
}
section {
background-color: #dedede;
padding: 20px;
border-bottom: solid 1px #333;
}
#footer {
position: absolute;
width: 100%;
z-index: 3;
background-color: #999;
color: #555;
}
#footer_text {
padding: 10px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="header_img" style="background: #ffffff url('https://cdn4.vectorstock.com/i/1000x1000/80/28/free-sample-rubber-stamp-vector-13448028.jpg') no-repeat center top; background-size: cover;"></div>
<div id="hero_container">
<div id="hero">
<div id="hero_text">
<h1>Lorem ipsum dolor sit</h1>
<h4>Cras felis leo, pellentesque non dui ut, molestie mollis lorem.</h4>
<p>Fusce venenatis metus id est venenatis ornare. Aliquam id ante et nulla rutrum malesuada vel sit amet felis. Maecenas maximus, quam vitae cursus ultrices, est augue consequat magna, vitae bibendum ex urna eget lacus. Donec quis sagittis diam.</p>
</div>
</div>
</div>
<div id="content">
<section>
<h2>Vivamus molestie</h2>
<p>Sem sit amet posuere elementum, ligula dolor laoreet eros, sed ultrices mi lacus quis est. Sed ut venenatis metus, id consectetur mauris.</p>
</section>
<section>
<h2>Mauris sollicitudin ante est</h2>
<p>Ut ultrices neque volutpat quis. Aenean bibendum dui sed pulvinar vestibulum. Vestibulum finibus ornare dui at lobortis.</p>
</section>
<section>
<h2>Sed consequat euismod sem</h2>
<p>In venenatis lacus luctus in. Nam elementum dolor a magna eleifend consectetur. Curabitur efficitur magna erat, et eleifend enim placerat sit amet. Fusce cursus, sem vel porta tempor, diam dolor auctor lorem, eu venenatis velit lorem ac lectus.</p>
</section>
</div>
<div id="footer">
<div id="footer_text">© 2020 SchweizerSchoggi</div>
</div>

Answer 1

.hero-container {
height: 100vh;
display: flex;
}
.hero-content {
width: 100%;
background: grey;
align-self: flex-end;
}
#media only screen and (max-height: 300px) {
.hero-container{
padding-top: 25vh;
}
.hero-content{
align-self: flex-start;
}
}
<div class="hero-container">
<div class="hero-content">
<h1>Lorem ipsum dolor sit</h1>
<h4>Cras felis leo, pellentesque non dui ut, molestie mollis lorem.</h4>
<p>Fusce venenatis metus id est venenatis ornare. Aliquam id ante et nulla rutrum malesuada vel sit amet felis. Maecenas maximus, quam vitae cursus ultrices, est augue consequat magna, vitae bibendum ex urna eget lacus. Donec quis sagittis diam.</p>
</div>
</div>
<div id="content">
<section>
<h2>Vivamus molestie</h2>
<p>Sem sit amet posuere elementum, ligula dolor laoreet eros, sed ultrices mi lacus quis est. Sed ut venenatis metus, id consectetur mauris.</p>
</section>
<section>
<h2>Mauris sollicitudin ante est</h2>
<p>Ut ultrices neque volutpat quis. Aenean bibendum dui sed pulvinar vestibulum. Vestibulum finibus ornare dui at lobortis.</p>
</section>
<section>
<h2>Sed consequat euismod sem</h2>
<p>In venenatis lacus luctus in. Nam elementum dolor a magna eleifend consectetur. Curabitur efficitur magna erat, et eleifend enim placerat sit amet. Fusce cursus, sem vel porta tempor, diam dolor auctor lorem, eu venenatis velit lorem ac lectus.</p>
</section>
</div>
<div id="footer">
<div id="footer_text">© 2020 SchweizerSchoggi</div>
</div>