Need help with creating a section that automatically fills the remaining viewport height below the navigation bar. The section includes a centered div and background image, along with a button at the bottom for scrolling down by one full viewport height. Here's the Bootstrap code for the navigation:
<body>
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="images/main.png" class="d-inline-block align-top navImg" alt="UAB Betono zona">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav navItems">
<li class="nav-item">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Link2
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Item1</a>
<a class="dropdown-item" href="#">Item2</a>
<a class="dropdown-item" href="#">Item3</a>
<a class="dropdown-item" href="#">Item4</a>
<a class="dropdown-item" href="#">Item5</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link5</a>
</li>
</ul>
</div>
</nav>
<section class="mainSection">
<div class="logoWrap">
<h1>
<span class="hFirst">Text1</span>
<span class="hSecond">Text2</span>
</h1>
</div>
<div class="scrollDown">
<a href="#" class="next-viewport-down"><span></span>down</a>
</div>
</section>Currently using height: 91vh as a temporary fix, but looking for a better solution to ensure consistent display across various devices. Here's the CSS code for the section:
section.mainSection {
background-color: #eeeeee;
height: 91vh;
position: relative;
background-image: url(images/Main3.jpg);
background-repeat: no-repeat;
background-size: cover;
}
div.logoWrap {
width: 100%;
margin: auto;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.logoWrap .hFirst {
font-weight: 600;
position: relative;
font-size: 2rem;
font-style: italic;
line-height: 4rem;
vertical-align: top;
width: auto;
}
div.logoWrap .hSecond {
position: relative;
font-weight: 700;
font-size: 4rem;
font-style: normal;
line-height: 4rem;
}Appreciate any insights or suggestions!