我使用的框架：MDB。我想创建一种放置在底部的 div，当用户滚动时，它会继续跟随页面，有点像粘性内容。在MDB网站上，有一个解决方案是模态底部，我可以通过JavaScript自动打开它，而无需用户按下按钮，问题是它完全掩盖了<body>怎样才能达到这样的效果而又不让页面黑屏呢？代码：<!-- Button trigger modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#frameModalBottom"> Launch demo modal</button><!-- Frame Modal Bottom --><div class="modal fade bottom" id="frameModalBottom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <!-- Add class .modal-frame and then add class .modal-bottom (or other classes from list above) to set a position to the modal --> <div class="modal-dialog modal-frame modal-bottom" role="document"> <div class="modal-content"> <div class="modal-body"> <div class="row d-flex justify-content-center align-items-center"> <p class="pt-3 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos.. </p> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div></div><!-- Frame Modal Bottom -->
3 回答
HUX布斯
TA贡献1876条经验 获得超6个赞
我想创建一种放置在底部的 div，当用户滚动时，它会继续跟随页面，有点像粘性内容。
你可以用position:sticky它来粘在底部......这是“有点像粘”
#content {
height: 800px;
border: 1px solid red;
}
#bottom {
border: 1px solid blue;
width: 100%;
background-color: #CCC;
text-align: center;
position: sticky;
bottom: 0;
}
<div id="content">
</div>
<div id="bottom">
bottom
</div>
如果您愿意，可以小提琴： https: //jsfiddle.net/c0me5d63/
如果您不想/不能使用position:sticky那么您可以使用position:fixed
#content {
height: 800px;
border: 1px solid red;
margin-bottom:1.5em;
}
#bottom {
border: 1px solid blue;
width: 100%;
background-color: #CCC;
text-align: center;
position:fixed;
bottom:0;
}
<div id="content">
</div>
<div id="bottom">
bottom
</div>
添加回答
举报
0/150
提交
取消