gpt4 book ai didi

html - 位置 :sticky div not sticky at the bottom of the screen

转载 作者:行者123 更新时间:2023-11-28 19:26:42 26 4
gpt4 key购买 nike

我有一个这样的 div :

HTML

<div class="row" style="min-height: calc(100vh - 81px);">
<aside class="col-lg-3" style="padding-top: 8px; background: rgb(227, 227, 227); padding-left: 20px;">
<h3>Title</h3>
<div id="treeparent"></div>
</aside>
<div class="col-lg-7 pt-2"></div>
<div class="col-lg-2" style="border-width: 0px 0px 0px 0.25rem; border-style: solid; border-color: rgb(234, 35, 40); border-image: linear-gradient(rgb(179, 108, 219), rgb(235, 73, 113)) 0 0 0 100% / 1 / 0 stretch;">
<div id="tocOut">
<div>
<h1 id="this-is-a-title" class="header-toc">
<a href="#this-is-a-title" title="This is a title">
<span>This is a title</span>
</a>
</h1>
</div>
</div>
</div>
</div>

CSS

#tocOut {
position: sticky;
padding-top: 8px;
top: 81px;
overflow: auto;
height: 100%;
}

问题是 #tocOut div 没有粘在屏幕顶部,我不知道为什么。

最佳答案

当然,只有当父元素在视口(viewport)中并且高于视口(viewport)时,元素才会固定。

稍微更新了您的代码。

#tocOut {
position: -webkit-sticky; /* */
position: sticky;
padding-top: 8px;
top: 21px;
overflow: auto;
background: orange;
}
<div class="row" style="min-height: calc(100vh - 81px);">
<aside class="col-lg-3" style="padding-top: 8px; background: rgb(227, 227, 227); padding-left: 20px;">
<h3>Title</h3>
<div id="treeparent"></div>
</aside>
<div class="col-lg-7 pt-2"></div>
<div class="col-lg-2" style="border-width: 0px 0px 0px 0.25rem; border-style: solid; border-color: rgb(234, 35, 40); border-image: linear-gradient(rgb(179, 108, 219), rgb(235, 73, 113)) 0 0 0 100% / 1 / 0 stretch;">
<div id="tocOut">
<div>
<h1 id="this-is-a-title" class="header-toc">
<a href="#this-is-a-title" title="This is a title">
<span>This is a title</span>
</a>
</h1>
</div>
</div>
<br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br> <br>ANOTHER CONTENT<br>
</div>
</div>

关于html - 位置 :sticky div not sticky at the bottom of the screen,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55994589/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com