HTML 页面:溢出 100vh
HTML page: Overflow of a 100vh
我有一个页面有一个 header 和一个 100vh 的部分,其余部分有一个页脚(所以你必须滚动才能看到它)。
问题是,如果我在页脚上滚动并降低视口高度(通过减小屏幕),部分内容会在页脚上溢出...
这是一个例子:
.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 class="the-whole">
<div class="full-screen">
<header>
head
</header>
<section>
section
<br/><br/><br/><br/><br/><br/><br/><br/>
quite the sight
</section>
</div>
<footer>
footer
</footer>
</div>
在页脚上滚动,然后缩小整个 window 大小,“非常漂亮”文本应该在一处重叠在页脚上。
我希望页脚不穿过该部分(或者相反)。理想情况下,当屏幕缩小时,页脚会粘在该部分的末尾,并且页面会保持这个高度。
我试过在页脚上使用 margin
,在 .the-whole
class 上设置 min-height
。 .full-screen
上的 overflow-y:scroll
有效,但我得到 2 个滚动条,这是不可接受的。
我需要保持屏幕 as-is(页脚和部分可见,但页脚不可见)。
有什么想法吗?
把.full-screen
height
改成min-height
,还是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 class="the-whole">
<div class="full-screen">
<header>
head
</header>
<section>
section
<br/><br/><br/><br/><br/><br/><br/><br/>
quite the sight
</section>
</div>
<footer>
footer
</footer>
</div>
我有一个页面有一个 header 和一个 100vh 的部分,其余部分有一个页脚(所以你必须滚动才能看到它)。
问题是,如果我在页脚上滚动并降低视口高度(通过减小屏幕),部分内容会在页脚上溢出...
这是一个例子:
.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 class="the-whole">
<div class="full-screen">
<header>
head
</header>
<section>
section
<br/><br/><br/><br/><br/><br/><br/><br/>
quite the sight
</section>
</div>
<footer>
footer
</footer>
</div>
在页脚上滚动,然后缩小整个 window 大小,“非常漂亮”文本应该在一处重叠在页脚上。
我希望页脚不穿过该部分(或者相反)。理想情况下,当屏幕缩小时,页脚会粘在该部分的末尾,并且页面会保持这个高度。
我试过在页脚上使用 margin
,在 .the-whole
class 上设置 min-height
。 .full-screen
上的 overflow-y:scroll
有效,但我得到 2 个滚动条,这是不可接受的。
我需要保持屏幕 as-is(页脚和部分可见,但页脚不可见)。
有什么想法吗?
把.full-screen
height
改成min-height
,还是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 class="the-whole">
<div class="full-screen">
<header>
head
</header>
<section>
section
<br/><br/><br/><br/><br/><br/><br/><br/>
quite the sight
</section>
</div>
<footer>
footer
</footer>
</div>