时间戳

首页 > 解决方案 > 为什么位置粘性不适用于引导程序 4

html - 为什么位置粘性不适用于引导程序 4

问题描述

我正在尝试在 div 中制作粘性 div col-md-3，如果我不使用col-md-3类，它可以正常工作，请告诉我我做错了什么，

.sticky {
  position: sticky;
  top: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class=" col-3">
    <div class="sticky" style="border:1px solid; color:red">sticky</div>
  </div>
  <div class="col-9" style="height:1000px; border:1px solid; background:red">
  </div>
</div>

标签： htmlcsstwitter-bootstrapcss-positionsticky

解决方案

由于父 div (.col-3) 发生了粘性位置，因为它具有 display flex 属性，因此它的高度等于 div (col-9)。

简而言之：

<div style="display: flex;">
  <div class="1"></div>
  <div class="2" style="height="500px;"></div>
</div>

现在在上面的 HTML 中，div 类 1 也得到了 height = div class 2 (500px)。

div 类 1 中的任何元素（位置：粘性）对于下一个 500 像素都是粘性的。

如果任何元素是粘性的，那么它也具有相同的定义父高度。

推荐阅读