I have a page with a header and a section on a 100vh, and a footer on the rest (so you have to scroll to see it).
The problem is that if I scroll on the footer, and reduce the viewport height (by reducing the screen), the section content overflows on the footer ...
Here's an example:
.full-screen {
height: 100vh;
background-color: lightgrey;
width: 100%;
}
.the-whole{}
header{
height: 90px;
background-color: lightgreen;
width: 100%;
}
section {
margin-top:20px;
min-height: 120px;
width: 100%;
background-color: lightyellow;
}
footer{
height: 90px;
width: 100%;
background-color: lightsalmon;
}
<div >
<div >
<header>
head
</header>
<section>
section
<br/><br/><br/><br/><br/><br/><br/><br/>
quite the sight
</section>
</div>
<footer>
footer
</footer>
</div>
Scroll on the footer, then reduce the whole window size, and the "it's quite the sight" text should overlap on the footer at one point.
I want the footer to not go through the section (or maybe it's the other way around). Ideally, when the screen reduces, there's a moment where the footer stickon the end of the section, and the page stays this height.
I've tried using margin
on the footer, setting a min-height
on .the-whole
class. An overflow-y:scroll
on .full-screen
works but I get 2 scrollbars which is not acceptable.
I need to keep the screen as-is (footer and section in visible, but not footer).
Any ideas ?
CodePudding user response:
Change the .full-screen
height
to min-height
, still set to 100vh
:
.full-screen {
min-height: 100vh;
background-color: lightgrey;
width: 100%;
}
.the-whole{}
header{
height: 90px;
background-color: lightgreen;
width: 100%;
}
section {
margin-top:20px;
min-height: 120px;
width: 100%;
background-color: lightyellow;
}
footer{
height: 90px;
width: 100%;
background-color: lightsalmon;
}
<div >
<div >
<header>
head
</header>
<section>
section
<br/><br/><br/><br/><br/><br/><br/><br/>
quite the sight
</section>
</div>
<footer>
footer
</footer>
</div>