I am currently working with 2 divs that are absolutely positioned within a relative container. I intend to utilize JavaScript for toggling visibility.
.container {
position:relative;
}
.section1 {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.section2 {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.section1 .div1 {
background:green;
}
.section1 .div2 {
background:purple;
}
.section1 .div3 {
background:brown;
}
.section1 .div4 {
background:grey;
}
.section2 .div1 {
background:pink;
}
.section2 .div2 {
background:gold;
}
.section2 .div3 {
background:blue;
}
.section2 .div4 {
background:orange;
}
.footer {
background:lightblue;
min-height:100vh;
}<div class="container">
<div class="section1">
<div class="div1">
This is Item 1
</div>
<div class="div2">
This is Item 2
</div>
<div class="div3">
This is Item 3
</div>
<div class="div4">
This is Item 4
</div>
</div>
<div class="section2">
<div class="div1">
This is Item 1
</div>
<div class="div2">
This is Item 2
</div>
<div class="div3">
This is Item 3
</div>
<div class="div4">
This is Item 4
</div>
</div>
</div>
<div class="footer">
Footer
</div>The two sections work as expected, however, the footer is not displaying correctly. Should I consider adding a clear fix?