My goal is to make the entire website fit perfectly into the viewport without requiring any scrolling. The main pages I am focusing on are index, music, and contact, as the other two pages lead to external sources (you can find the link at the bottom of this post).
I have attempted various methods, but none of them seem to work as expected. It's possible that I might be implementing them incorrectly.
Initially, I tried setting the body's max-height to 100vh, but it did not produce the desired result. Then, I wrapped the whole page in a div with the same max-height property, still with no success.
Subsequently, another approach involved styling the html and body elements as follows:
html body { margin: 0; min-height: 100%; }A similar attempt was made using 'vh' instead of percentage in the CSS:
html body { min-height: 100vh; position: relative; //I added this for potential sticky footer implementation margin: 0; }Furthermore, I came across a JavaScript solution from someone else, which aimed to apply CSS to adjust the cover div (or in my case, the body tag or the container div of all content) to match 100 viewport height and width.
var vHeight = $(window).height(), vWidth = $(window).width(), cover = $('.cover'); cover.css({"height":vHeight,"width":vWidth});
Unfortunately, none of the above approaches yielded the desired outcome. Can anyone provide any tips or hints on how to achieve this successfully?
Link to the site:
Edit:
HTML Structure:
<div class="container-fluid">
<div class="row">
<section id="intropage">
<section id="container-banner">
<div class="section first">
<div class="cont_title">
<h1><a href="music.html">Music</a></h1>
</div>
</div>
<div class="section">
<div class="cont_title">
<h1><a href="tour.html">Tour</a></h1>
</div>
</div>
<div class="section">
<div class="cont_title">
<h1 class="font-weight-bold">Members<br>Only</h1>
<h3>Free Song<br>upon Sign-Up</h3>
<a href="http://www.holyrollerbaby.com/members/">
<button class="btn hoverable">Enter</button>
</a>
</div>
</div>
<div class="section">
<div class="cont_title">
<h1><a href="https://holyrollerbabyofficialstore.bigcartel.com/">Store</a></h1>
</div>
</div>
<div class="section">
<div class="cont_title">
<h1><a href="contact.html">Contact</a></h1>
</div>
</div>
</section>
<div class="video-container">
<video autoplay loop muted>
<source src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4"
type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="overlay-desc text-center">
<h1 class="white-text">"Spread Your Love Around" <br>Music Video Out Now!</h1>
</div>
<div class="overlay-icons">
<a href="https://www.facebook.com/holyrollerbaby/"><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/holyrollerbaby/"><i class="fa fa-instagram"></i></a>
<a href="https://www.youtube.com/channel/UC9xenomg5a4OcN0wz4X2msg?view_as=subscriber"><i class="fa fa-youtube"></i></a>
</div>
</div>
CSS Styling:
// Various media queries...
...
// Specific styles for video container and overlay elements
...
// Styles for homepage banner sections
...
.logo{
...
}
// Additional styles for different elements
...