Html '；位置：粘性'；当'时不工作；高度'；定义
我正在构建一个登录页，用户第一次看到一个主区域，它下面有一个页脚。进一步向下滚动显示页脚是一个粘性页眉，我的目标是使用纯CSS来实现这一点。为了获得主要内容和页脚的全屏外观，我将Html '；位置：粘性'；当'时不工作；高度'；定义,html,css,flexbox,css-position,sticky,Html,Css,Flexbox,Css Position,Sticky,我正在构建一个登录页，用户第一次看到一个主区域，它下面有一个页脚。进一步向下滚动显示页脚是一个粘性页眉，我的目标是使用纯CSS来实现这一点。为了获得主要内容和页脚的全屏外观，我将height属性设置为两个不同的值：92%和8%（使用vh也不起作用）。无论我在CSS中指定的高度是多少（不同的单位和所有单位），我的页脚div都不会粘住。只要我删除height属性，它就会按预期工作 以下是删除height属性之前我的页面截图： 如您所见，它不会粘住： 删除height属性值后，它确实会粘住： 以
heightvhdivheightheightheighthtml，
身体{
身高：100%；
保证金：0；
}
#主要{
身高：92%；
}
#降落{
显示器：flex；
对齐项目：居中；
证明内容：中心；
身高：100%；
文本对齐：居中；
}
#登陆内容{
宽度：20vw；
}
#页脚导航{
身高：8%；
显示器：flex；
对齐项目：居中；
职位：-网络工具包粘性；
位置：粘性；
顶部：0px；
}
标志
Lorem ipsum、段落内容等
按钮
标志
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好<!doctype html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.footerNav {
background-color: red;
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
</style>
</head>
<body>
<div id="main">
<div id="landing">
<div id="landingContent">
<h1 class="logo">Logo</h1>
<p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p>
<button>Button</button>
</div>
</div>
</div>
<div class="footerNav">
<div id="footerNavContent">
<h1 class="logo">Logo</h1>
</div>
</div>
</body>
* {
保证金：0；
填充：0；
}
.页脚导航{
背景色：红色；
位置：绝对位置；
底部：0；
宽度：100%；
高度：100px；
}
标志
Lorem ipsum、段落内容等
按钮
标志
<!doctype html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#main {
height: 100vh;
}
#footerNav {
background-color: red;
position: relative;
bottom: 0;
width: 100%;
height: 100px;
}
</style>
</head>
<body>
<div id="main">
<div id="landing">
<div id="landingContent">
<h1 class="logo">Logo</h1>
<p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p>
<button>Button</button>
</div>
</div>
</div>
<div id="footerNav">
<div id="footerNavContent">
<h1 class="logo">Logo</h1>
</div>
</div>
</body>
* {
保证金：0；
填充：0；
}
#主要{
高度：100vh；
}
#页脚导航{
背景色：红色；
位置：相对位置；
底部：0；
宽度：100%；
高度：100px；
}
标志
Lorem ipsum、段落内容等
按钮
标志
我希望我的回答能对你有所帮助。这里的问题是关于
高度的问题，而不是你所想的高度的问题。让我们首先从定义开始：
粘性定位图元是指其计算位置
价值是粘性的。它被视为相对定位的，直到
包含块跨越指定的阈值（例如将top设置为
其流根（或它所属的容器）中的值（非自动）
在中滚动），此时它将被视为“卡住”，直到会议结束
其包含块的相对边
这里最重要的部分是最后一句话，它解释了当元素到达其包含块的边缘时，粘性位置将结束，在您的情况下，粘性元素的包含块就是主体，您将主体设置为高度：100%
，并且您的内容溢出
因此，当将main的高度设置为92%，页脚设置为8%时，您已经将页脚设置在其包含块的对侧边缘。下面是一个示例，我在主体中添加了背景色，以便您可以清楚地看到：
html，
身体{
身高：100%；
保证金：0；
}
html{
背景：白色；
}
身体{
背景：蓝色；
}
#主要{
身高：92%；
}
#降落{
显示器：flex；
对齐项目：居中；
证明内容：中心；
身高：100%；
文本对齐：居中；
}
#登陆内容{
宽度：20vw；
}
#页脚导航{
身高：8%；
显示器：flex；
对齐项目：居中；
位置：粘性；
顶部：0px；
背景：红色；
颜色：#fff；
}
标志
Lorem ipsum、段落内容等
按钮
标志
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
我也有同样的问题，但我需要身高：100%。在我的情况下，我有一个粘性导航，内容需要增长到我