如何让页面内容在固定位置的按钮后面滚动？
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 但没有成功。已经谢谢了
qq_花开花谢_01回答
-
拉丁的传说
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>
随时随地看视频慕课网APP
相关分类
Html5