CSS:'position:sticky'在定义'height'时不起作用

Question

我正在构建一个登录页面,用户首先看到一个主要区域,其下方有一个页脚.向下滚动显示页脚是一个粘性标题,我的目标是使用纯CSS来实现这一点.为了获得主要内容和页脚的全屏外观,我将height属性设置为两个不同的值:92%和8%(使用vh也不起作用).无论height我在我的CSS中指定(不同的单位和所有),我的页脚div都没有坚持.一旦我删除该height属性它就按预期工作.

这是删除属性之前我的页面的屏幕截图height:

正如你所看到的,它并没有坚持:

删除height属性值后,它确实粘贴:

这是我的HTML:

html,
body {
  height: 100%;
  margin: 0;
}

#main {
  height: 92%;
}

#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

#landingContent {
  width: 20vw;
}

#footerNav {
  height: 8%;
  display: flex;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

这是我(可能)相关的CSS:

<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>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>

我已经读过,使用该overflow属性可能会有问题,虽然它不存在,也没有听到任何有关height其他人的问题.当然,我可能错了.

我测试过:

• Firefox 61(每晚)
• Safari 53(技术预览版)
• Chrome 65

编辑:大发展; 删除height属性#main保持#footerNav粘性.

Answer 1

这里的问题是height，而不是height您考虑的问题。让我们首先从粘性位置的定义开始：

粘性放置的元素是其计算的位置值为粘性的元素。它被看成相对定位，直到它的包含块超过指定阈值（例如，设置顶部为比自动其它值）内其流动的根（或容器它 内滚动），在该点它被视为“卡住”，直到满足 所述其包含块的相对边缘。

重要的部分是最后一句话，它解释了当元素到达其包含块的边缘时，sticky位置将终止，在您的情况下，sticky元素的包含块是body，并且您将body设置height:100%为具有溢出的内容。

因此，当将main的高度设置为92％并将页脚设置为8％时，您已经在其包含块的相反边缘处设置了页脚。这是我为身体添加背景色的插图，因此您可以清楚地看到这一点：

html,
body {
  height: 100%;
  margin: 0;
}
html {
  background:white;
}
body {
  background:blue;
}

#main {
  height: 92%;
}
#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
#landingContent {
  width: 20vw;
}
#footerNav {
  height: 8%;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
}

<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>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>

如您所见，徽标已经在主体底部，因此没有办法使其像粘性一样移动。您的内容也溢出了。

现在，如果您稍微降低主要内容的高度，您将看到一个小的粘性行为，当页脚到达蓝色部分（body）的底部时，该行为将终止。

html,
body {
  height: 100%;
  margin: 0;
}
html {
  background:white;
}
body {
  background:blue;
}

#main {
  height: 82%;
}
#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
#landingContent {
  width: 20vw;
}
#footerNav {
  height: 8%;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
}

<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>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>

为了解决此问题，您只需要避免固定height:100%在身体上即可。您可以min-height改用或保持其高度为自动。您还可以考虑vh主行和页脚的单位：

html,
body {
  /*height: 100%;
    no needed
  */ 
  margin: 0;
}
html {
  background:white;
}
body {
  background:blue;
}

#main {
  height: 92vh;
}
#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
#landingContent {
  width: 20vw;
}
#footerNav {
  height: 8vh;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
}

<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>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>

有关更多详细信息/示例的相关问题：

为什么带有position：sticky的元素不会停留在父对象的底部？

什么是“滚动框”？

如果您将“ bottom：0”指定为“ sticky”，为什么它会做一些与规范不同的事情？

Answer 2

我有同样的问题，但我需要height: 100%;在父容器上。就我而言，我有一个粘性导航，内容需要增长到其完整长度，并且页脚应始终在页面末尾可见（但没有位置属性）。

我通过设置overflow: auto;为该父容器来修复它。现在父级仍然是 100% 高，但其中的粘性容器与高度限制无关。