how to get fixed nav with full height section with content? - html

Question

I am stuck here, i want to make fix nav with full height section with content but second section is not going good after scroll, need help.
Below my tried code:
*,
*::after,
*::before {
margin: 0px;
padding: 0px;
box-sizing: inherit;
-webkit-box-sizing: inherit;
}
body,
html {
margin: 0px;
padding: 0px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
text-align: center;
padding: 10px 0px;
background: tomato;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 3px;
}
nav ul li a {
display: block;
padding: 5px;
background: #000;
color: #ddd;
text-decoration: none;
}
nav ul li a:hover {
background: #ddd;
color: #333;
}
section {
height: 100vh;
background: #303030;
margin: 0px;
padding: 0px;
}
section p {
margin-top: 54px;
color: #fff;
}
section.green {
background: green;
height: 100vh;
margin: 0px;
padding: 0px;
}
section.green p {
color: #ddd;
}
<section>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="green">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</section>
Can anyone help me out and provide me a solution to my problem?

Answer 1

You have nested <section> which is not recommended, a better approach should replace your outer <section> with <div class="wrapper">...</div>
Then use a wrapper class to set the margin-top: 54px which is the height of nav.
.wrapper {
margin-top: 54px;
height: 100vh;
background: #303030;
padding: 0px;
}
For the overlap, use calc to set the height dynamically height: calc(100vh - 52px);
*,
*::after,
*::before {
margin: 0px;
padding: 0px;
box-sizing: inherit;
-webkit-box-sizing: inherit;
}
body,
html {
margin: 0px;
padding: 0px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
text-align: center;
padding: 10px 0px;
background: tomato;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 3px;
}
nav ul li a {
display: block;
padding: 5px;
background: #000;
color: #ddd;
text-decoration: none;
}
nav ul li a:hover {
background: #ddd;
color: #333;
}
section {
height: 100vh;
background: #303030;
margin: 0px;
padding: 0px;
}
.wrapper {
margin-top: 54px;
height: 100vh;
background: #303030;
padding: 0px;
}
section p {
color: #fff;
}
section.green {
background: green;
height: calc(100vh - 52px);
margin: 0px;
padding: 0px;
}
section.green p {
color: #ddd;
}
<div class="wrapper">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="green">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>

Answer 2

You can use calc() to calculate the height of the sections
height: calc(100vh - 54px); /*54px is the height of the nav*/
So this will make the height of each section have the height of the screen minus the height of the nav.
And to remove the space between the sections you need to remove margin-top from the p tag and add padding-top:54px;to the container, again 54px is the height of the nav, and that for the sections to start right after the nav
*,
*::after,
*::before {
margin: 0px;
padding: 0px;
box-sizing: inherit;
-webkit-box-sizing: inherit;
}
body,
html {
margin: 0px;
padding: 0px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.container {
height: 100vh;
padding-top:54px;
}
nav {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
text-align: center;
padding: 10px 0px;
background: tomato;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 3px;
}
nav ul li a {
display: block;
padding: 5px;
background: #000;
color: #ddd;
text-decoration: none;
}
nav ul li a:hover {
background: #ddd;
color: #333;
}
section {
height: calc(100vh - 54px);
background: #303030;
margin: 0px;
padding: 0px;
}
section p {
color: #fff;
}
section.green {
background: green;
margin: 0px;
padding: 0px;
}
section.green p {
color: #ddd;
}
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="green">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>