After browsing through this website, I was inspired by its design and wanted to replicate something similar. The unique approach they took to ensure each section fits 100% of the viewport caught my eye.
They utilized a "div section-background" within each section, with its position relative to that specific section. This allowed them to set the background color effectively.
However, I couldn't help but wonder why they didn't simply assign the background color directly to each section. For instance, if the site consisted of 6 sections, why not implement something like this:
<body>
<section class="section1">
<section class="section2">
.....
</body>
CSS:
body, html {
height: 100%;
}
body section {
width: 100%;
min-height: 100vh;
}
.section1 {
background: blue;
}
.section2 {
background: red;
}
This alternative method would achieve the same outcome. What advantages might their technique offer? Does my suggestion make sense?
Thank you!