Question

我有一个全屏部分，有时比屏幕大。我想使用css Sticky来对齐并将截面的底部粘贴到视口/窗口的底部。

像这样坚持到顶端：

＆＃13;

body{
   height: 400vh;
}

section{
  border: 1px solid red;
  height: 100vh;
  position: sticky;
  top: 0;
}

＆＃13;

<body>
   <section />
</body>

＆＃13;

但我似乎无法坚持到底：

＆＃13;

body{
   height: 400vh;
}

section{
  border: 1px solid red;
  height: 150vh;
  position: sticky;
  bottom: 0;
}

＆＃13;

<body>
   <section />
</body>

＆＃13;

我也试过了 bottom: -100vh;

部分的高度是动态的。

Answer 1

您的代码实际上正在运行，只是因为它不符合预期。

见下文:(添加虚拟p元素以证明它正在运行。）

＆＃13;

body{
   height: 400vh;
}

section{
  border: 1px solid red;
  height: 150vh;
  position: sticky;
  bottom: 0;
}

＆＃13;

<body>
   <p>Lorem Ipsum</p>
   <p>Lorem Ipsum</p>
   <p>Lorem Ipsum</p>
   <p>Lorem Ipsum</p>
   <p>Lorem Ipsum</p>
   <p>Lorem Ipsum</p>
   <p>Lorem Ipsum</p>
   <p>Lorem Ipsum</p>
   <section />
</body>

＆＃13;

它看起来不起作用的原因是因为sticky是fixed和relative（according to w3schools）之间的切换，或者{{3 }，将元素相对于其流根并包含块。

这意味着什么？

当粘性元素放置在包含块中最顶部的可见区域时，根据正常流程（有关详细信息，请参阅according to MDN），它已在包含块中可见。因此，根据定义，它不应该是＆＃34;坚持＆＃34;到底。

＆＃13;

#sticky {
  position: sticky;
  bottom: 0;
  border: 1px solid red;
}

＆＃13;

<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<div id="sticky">Sticky</div>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>

＆＃13;

然而，当粘性元素没有放置在最顶部的可见区域时，根据其正常流动，它是隐藏的＆＃34;并且位于文档的中间或末尾。因此，根据定义，它应该是＆＃34;坚持＆＃34;在你滚动到原始流动位置之前，直到底部。

＆＃13;

#sticky {
  position: sticky;
  bottom: 0;
  border: 1px solid red;
}

＆＃13;

<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<div id="sticky">Sticky</div>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>
<p>Not sticky</p>

＆＃13;

希望这可以解释这种情况。

Css粘到页面底部？

1 个答案: