css 定义了“height”时“position：sticky”不起作用

qoefvg9y 于 2023-06-25 发布在其他

关注(0)|答案(3)|浏览(127)

我正在构建一个登陆页面，用户首先看到一个主要区域，下面有一个页脚。进一步向下滚动显示页脚是一个粘性标题，我的目标是使用纯CSS来实现这一点。为了获得主内容和页脚的全屏外观，我将height属性设置为两个不同的值：92%和8%（使用vh也不起作用）。不管我在CSS中指定的height（不同的单位和所有的），我的页脚div都不粘。一旦我删除了height属性，它就能正常工作。
以下是我删除height属性之前的页面截图：

正如你所看到的，它不会**坚持：

删除height属性值后，它 * 确实 * 坚持：

3条答案

按热度按时间

j8yoct9x1#

这里的问题是height，而不是你想到的height。我们先从sticky position的定义开始：
粘性定位元素是计算出的位置值是粘性的元素。它被视为相对定位，直到它的包含块在它的流根（或它*滚动的容器）内超过指定的阈值（例如将top设置为auto以外的值），此时它被视为“卡住”，直到遇到它的包含块的相对边缘**。
这里最重要的部分是最后一句，它解释了当元素到达其包含块的边缘时，sticky位置将 end，在你的例子中，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;
  background:red;
  color:#fff;
}

<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;
  background:red;
  color:#fff;
}

<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%设置到body。您可以使用min-height代替或保持其高度自动。您也可以考虑vh单位作为main和footer：

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;
  background:red;
  color:#fff;
}

<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>

赞(0）回复(0）举报 2023-06-25

vojdkbi02#

我也遇到了同样的问题，但我需要父容器上的height: 100%;。在我的例子中，我有一个粘性导航，内容需要增长到其完整的长度，页脚应该总是在页面的末尾可见（但没有位置属性）。
我通过将overflow: auto;设置为父容器来修复它。现在父对象仍然是100%高的，但是它里面的粘性容器，不受高度限制。

赞(0）回复(0）举报 2023-06-25

cygmwpex3#

支持使用位置：粘粘的似乎有点弱。您可以在此页面查看：
https://caniuse.com/#search=position%3A%20sticky
如果你想要一个粘性页脚，你可以使用position：绝对，这是每个浏览器都支持的。我用你的代码创建了一个迷你版本来说明我关于位置的观点：绝对的。

<!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>

请注意，我将id=“footerNav”更改为class=“footerNav”。我个人喜欢使用风格的课程。但是如果你仍然喜欢的话，你可以使用id。
如果你希望登录页面出现，然后用户滚动一点来查看你的页脚，那么你可以使用height：100vh，并从页脚中删除位置绝对值，因为它将被主要内容div向下推。例如：

<!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）举报 2023-06-25

我来回答

css 定义了“height”时“position：sticky”不起作用

3条答案

相关问题

热门标签

最新问答