position: fixed我在網(wǎng)頁(yè)底部有一個(gè)按鈕。如何使頁(yè)面內(nèi)容滾動(dòng)到按鈕后面？這是一張圖片，更詳細(xì)地說(shuō)明了我的意思：這是我嘗試過(guò)的一些代碼：<!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 滾動(dòng)到網(wǎng)頁(yè)底部固定位置的按鈕后面的邏輯。我嘗試margin-bottom在頁(yè)面內(nèi)容中添加 a 但沒(méi)有成功。已經(jīng)謝謝了
1 回答
拉丁的傳說(shuō)
TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超8個(gè)贊
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 關(guān)注
- 122 瀏覽
添加回答
舉報(bào)
0/150
提交
取消