将元素粘贴在页面滚动的底部
要将元素粘贴在页面滚动的底部，可以使用CSS的position属性配合定位来实现。
首先，为了使页面能够滚动，需要给元素的父容器设置一个固定的高度，并将overflow属性设置为scroll或auto。这样当内容超过容器高度时，将出现滚动条。
然后，为要粘贴在底部的元素设置position属性为fixed，这样它将相对于浏览器窗口进行定位，而不是相对于文档流。
接下来，通过设置bottom属性为0，将元素定位在浏览器窗口底部。可以同时设置left、right属性来调整元素在水平方向的位置。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 400px;
overflow: auto;
position: relative;
}
.sticky {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #f1f1f1;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec enim eu nulla pulvinar malesuada. Nullam aliquet purus tortor, eget posuere odio luctus in. Maecenas dignissim libero vel purus auctor, nec tempus justo volutpat. Donec vitae dui et tortor scelerisque semper eget in neque. In mauris tellus, tincidunt non feugiat sit amet, convallis et lectus. Nulla rutrum volutpat viverra. Sed sit amet libero sit amet felis semper iaculis.</p>
<p>Vestibulum in lacinia quam. Mauris ultricies tempor sapien in aliquet. Nulla auctor magna nec enim mollis sollicitudin. Nullam ac ligula mauris. Donec nec dui malesuada, cursus felis id, tempus risus. Duis eu vestibulum mauris, in euismod elit. Phasellus ac erat elit. Sed congue nulla non dapibus vulputate. Maecenas placerat mi nec elementum ultrices. Proin vel lacinia elit. Nulla venenatis mollis mi a ullamcorper. Sed semper quam id urna mollis, eget efficitur lectus feugiat. Curabitur pellentesque risus in mauris dapibus mattis. Sed cursus viverra quam, nec pulvinar purus pharetra non. Mauris nec enim in ipsum hendrerit suscipit. Quisque hendrerit lorem in felis euismod elementum. Donec in arcu a quam vestibulum feugiat.</p>
<p>Etiam at interdum leo. Nunc eu eros arcu. Vivamus vitae mi non mi dignissim iaculis. Donec vitae nunc ac quam viverra blandit. Suspendisse non semper nulla. Pellentesque in massa elit. Quisque placerat nulla ipsum, a tempus mi convallis sed. Fusce tincidunt mollis mi sit amet placerat. Nulla facilisi. Suspendisse faucibus pretium facilisis. Sed quis lacus laoreet, posuere ipsum non, consectetur neque.</p>
</div>
<div class="sticky">
This element will stick to the bottom of the page while scrolling.
</div>
</body>
</html>这段代码中，首先定义了一个高度为400px的容器，将内容放置其中。然后，通过设置overflow属性为auto，使容器出现滚动条。
接着，定义了一个带有sticky类的元素，设置其position为fixed，并通过bottom、left和right属性将其粘贴在浏览器窗口底部。
运行代码，你将看到该元素随着页面的滚动保持在底部位置。
希望这个解答对您有帮助！
相关·内容
1回答
我有一个普通的UIViewController，上面有一个导航条，当我向下滚动时，它会与视图的其余部分一起滚动。现在，我想添加另一个工具栏，它做的完全一样，但坚持在底部。最终，我希望视图向下滚动(我有很多内容)，导航栏在顶部，工具栏在底部，在视图的其余部分后面。非常感谢
浏览 3提问于2015-08-24得票数 0
回答已采纳
我想让一个元素变得粘稠，如果用户滚动过它，它会“粘”到页面的顶部，在用户滚动到它之前，它会粘到页面的底部。
我知道如何使它粘稠，但不是两者兼而有之。
浏览 2提问于2022-01-23得票数 1
3回答
将元素粘贴在页面滚动的底部
、、、、
我一直在尝试将Spotify嵌入代码嵌入到我的网页中。当我到达iframe时，我希望Spotify iframe代码粘在页面底部。假设您正在滚动网页，并到达放置iframe的位置。现在，当您进一步滚动时，iframe不是向上滚动，而是停留在页面底部。请运行代码。我知道没有任何代码来执行我想要的任务，所以请提出一些建议。
浏览 3提问于2020-07-22得票数 1
回答已采纳
1回答
当有人向下滚动我们的页面时，在某个时刻出现一个div (带有cta按钮)进入视图。我想要实现的是，从那一刻起，这个div就会变得“粘稠”，如果站点正在向下滚动，那么这个div就会与视口一起滚动到的底部。这个div基本上是，但不是，有点粘粘的页脚，因为网站的其他部分继续滚动在它后面。
现在，我没有问题，在页面顶部的div粘性，但这
浏览 1提问于2017-08-22得票数 2
本应是几行简单的jQuery代码在Internet Explorer中似乎不能正常工作。在Firefox中运行良好。当你在视区底部200px的范围内滚动时，当你滚动过去时，固定位置的div应该“粘”在页面上。在Firefox中，该示例可以正常工作。当滚动位置距离文档高度的底部为200 px时，固定位置div将变为具有T
浏览 4提问于2011-08-15得票数 0
回答已采纳
2回答
我试图让一个页脚冲到页面的底部，但不一定是粘粘的--只是在底部，以防用户滚动。如果你想让我发布我的html/css，请告诉我。
浏览 4提问于2014-11-06得票数 3
回答已采纳
我有一个语义UI粘菜单。我在其他网站上使用它的方式完全相同(相同的骨架)，通常当页面向下滚动时，菜单会得到“固定顶部”类。把它固定在页面的顶部。不过，这一次，在滚动了我的横幅之后，它得到了类“绑定底部”，这使它保持在父元素(主体)的底部。我不明白为什么要应用这些类，也不明白如何应用这些类。我已经尝试添加“固定顶部”到我的菜单，但类被删除和“绑定底部</em
浏览 0提问于2018-10-22得票数 3
10回答
页面底部有粘性页脚的问题
、、、
我目前正在打造我的。然而，虽然我不知道怎么做，但突然之间，我一定是调整了一些东西，结果它又不粘了。你猜怎么着，我不能修好它。:S (我必须承认CSS从来不是我真正喜欢的.)伙计们，非常感谢你们的超快回复。我觉得你做得对。但不是100% --也许
浏览 10提问于2014-11-06得票数 2
回答已采纳
1回答
我需要一个css，其中底部div应该被粘贴到底部，当数据加载滚动应该通过粘贴底部框div来进行。
Div a在div b内。div b和a之间的gab有大量的数据加载，这会影响div b的位置，而div b将向下滚动，并将处于视野之外的端口，因此当这些数据加载时，div应该保持粘粘到底部。
浏览 4提问于2021-05-13得票数 0
回答已采纳
1回答
我有一个有位置的块:粘粘的，下面有块。有什么方法可以跟踪粘滞块贴在顶部并在底部块中添加类的时间吗？我想我应该使用$(window).scroll()，但不知道如何使用。
浏览 3提问于2022-01-31得票数 0
回答已采纳
我有一个元素(<button id="foo">FAQ</button>)。我有这个按钮的css，即： position: absolute; left: 0px;/* same thing here*/问题是元素在屏幕底部结束(不像我想做的那样是浏览器窗口)，当你向下滚动<
浏览 0提问于2016-10-25得票数 0
只有当用户滚动到页面顶部时，我才想在手机上显示导航条。我的JS代码： if (e[0].intersectionRatiodocument.documentElement.setAttribute('class','stuck');
浏览 0提问于2018-06-17得票数 1
回答已采纳
4回答
我有一个按钮，我想留在屏幕的底部，无论你如何上下滚动页面。我需要它和窗户底部保持一定的距离。
我怎么才能让它变得像这样粘呢？
浏览 1提问于2015-05-04得票数 5
我想要将一个元素附加到导航栏的底部导航栏是固定的，所以当我滚动时，它将位于顶部。问题是如何更改该元素的页边距顶部，使其顶部成为导航栏的底部。它的底部是固定的..(如果我读得太多，它会被隐藏)，所以当我滚动时，这个元素的高度会变小。('.imagebleu').css('margin-top'
浏览 0提问于2015-07-02得票数 0
1回答
class="category-content col-10">ontent</div><div class="footer">This is footer</div>
我试着用“粘粘”的位置来完成这个操作，但是结果并不一样:当页面被滚动时，只有内容被滚动。当您滚动到内容的末尾时，侧栏本身已经在滚动<
浏览 3提问于2022-08-22得票数 0
3回答
这是我现在正在处理的页面：知道这有可能吗？更新我希望我的网页总是填写垂直视图，即使没有足够的内容。只要有足够的内容，甚至可以扩展视图，页面就应该是可滚动的。在我
浏览 6提问于2012-09-10得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
