position: fixed我在网页底部有一个按钮。如何使页面内容滚动到按钮后面？这是一张图片，更详细地说明了我的意思：这是我尝试过的一些代码：<!DOCTYPE html> <html> <head> <style type="text/css"> #content { height: 150px; width: 100%; background-color:lightpink; padding:25px; margin:20px; } #header{ color:white; width:100%; height:40px; left:0; top:0; position:fixed; background-color:black; } #sidebar{ top:0; left:0; width:90px; height:100%; position:fixed; color:white; background-color:steelblue; } .btn-bottom-center { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, -50%); margin: 0 auto; } </style> </head> <body>尺寸并不重要。我只需要知道如何使 div 滚动到网页底部固定位置的按钮后面的逻辑。我尝试margin-bottom在页面内容中添加 a 但没有成功。已经谢谢了
1 回答
拉丁的传说
TA贡献1789条经验 获得超8个赞
div将按钮包裹在具有定义的高度、left: 90px;、right: 0和bottom: 0不透明背景的固定位置：
html,
body {
margin: 0;
}
#content {
height: 150px;
width: 100%;
background-color: lightpink;
padding: 25px;
margin: 20px;
}
#header {
color: white;
width: 100%;
height: 40px;
left: 0;
top: 0;
position: fixed;
background-color: black;
}
#sidebar {
top: 0;
left: 0;
width: 90px;
height: 100%;
position: fixed;
color: white;
background-color: steelblue;
}
.btn-bottom-center {
position: fixed;
left: 50%;
bottom: 20px;
transform: translate(-50%, -50%);
margin: 0 auto;
}
.bottom {
height: 80px;
background: green;
position: fixed;
bottom: 0;
left: 90px;
right: 0;
}
<div id="defaultFragment" fragment="defaultFragment">
<div id="header">
<center>
<h3>Header</h3>
</center>
</div>
<div class="main-container container-fluid">
<div class="page-container">
<div id="sidebar" th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</div>
<!--Get Started-->
<div class="bottom">
<input id="get_started" type="button" class="btn-bottom-center" value="GET STARTED" />
</div>
- 1 回答
- 0 关注
- 68 浏览
添加回答
举报
0/150
提交
取消