So I am trying to do that section which is below navigation would automatically fill the remaining view-port height. Section contains one centered div and background picture. At the bottom there is a button which on click scrolls down full view-port height. Navigation is all bootstrap but I will add it here in case you need more details:
<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>As for a temporary solution I'm using height: 91vh, but its not a good option as different devices will display it differently. CCS of 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;
}Thanks for any input!
You can use flexbox to fill up available space, see the code below (top of CSS is new, the rest is unchanged):
* { box-sizing: border-box; }
body {
margin: 0;
display: flex;
align-items: stretch;
flex-direction: column;
height: 100vh;
}
.navbar {
flex: 0;
}
.mainSection {
flex: 1 1 auto;
overflow: auto;
}
/* Your code below is unchanged */
section.mainSection {
background-color: #eeeeee;
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;
}<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>
</body>