我正在创建一个登录页面，滚动到该页面时需要一个div使其停留在屏幕底部。我正在使用css sticky，当我要将div粘贴到窗口的顶部而不是底部时，它可以工作。请在移动尺寸上进行测试。
<html>
<div id="page_content">
<div class="row clearfix">
<div class="column_12 free-tote-top-div">
<div class="free-tote-image" style="display:none;">
</div>
<div class="ft-top-div-words">
<h2 class="margin_bottom_50">Free Organic Tote</h2>
<h1 class="margin_bottom_50 without-padding">Healthy can be<br>easy as 1, 2, 3.</h1>
<div class="deodorant-thumbnail-mobile">
</div>
<p class="tote-directions">1. Make a free trial account.</p>
<p class="tote-directions">2. Purchase any product.</p>
<p class="tote-directions">3. Get a free tote with your first purchase.</p>
<a href="#" class="ft-signup-btn subscribe-to-membership-45-58 subscribe-to-membership membuttonclick" style="display:none">Get Your Gift — Start Free Trial</a>
</div>
</div>
<div class="free-tote-second-div">
<h3>Get Your Gift — Start Free Trial</h3>
</div>
<div class="column_12 free-tote-third-div"></div>
<div class="column_12 free-tote-review-section">
<div class="free-tote-reviews">
<h1>Why we love the tote.</h1>
<div class="free-tote-review">
<img src="https://cdn.shopify.com/s/files/1/0838/7991/files/starz3.png?14175916445677503279" alt="reviews"/>
<p class="ft-review-words">“It’s perfect for shopping, going to the gym, or even an overnight trip.”</p>
<p class="ft-review-name">- Nosipho M.</p>
</div>
<div class="free-tote-review">
<img src="https://cdn.shopify.com/s/files/1/0838/7991/files/starz3.png?14175916445677503279" alt="reviews"/>
<p class="ft-review-words">“Wonderful bag... Everything about it is top-notch.“</p>
<p class="ft-review-name">- Spencer W.</p>
</div>
</div>
</div>
<div class="free-tote-product-carousel">
<p>Healthy. Affordable. Eco-Friendly.<br>It’s all good.</p>
<div class="powr-image-slider" id="ab348c59_1547667152"></div>
<div class="ft-member-favorites row" id="mission_top_text" style="display:none">{% section 'member-favorites' %}</div>
</div>
<div class="free-tote-publications">
<div class="ft-pub-top">
<div class="ft-publication">
<p>“Public Goods takes the guesswork out of simple, easy-to- use grooming and bathroom products.”</p>
<img src="https://cdn.shopify.com/s/files/1/0838/7991/files/daily-beast.png?16842974685795887946" />
</div>
<div class="ft-publication" style="float:right">
<p>“Household items aren’t marked up. (You pay only the amount it costs to produce the items.)”</p>
<img src="https://cdn.shopify.com/s/files/1/0838/7991/files/buzzfeed.png?16842974685795887946" />
</div>
</div>
<div class="ft-pub-bottom">
<div class="ft-publication">
<p>“Better quality everyday products in biodegradable or recycled packaging.”</p>
<img src="https://cdn.shopify.com/s/files/1/0838/7991/files/forbes_09623cdb-cbcc-4ab2-9c02-4f6c53c66e78.png?16842974685795887946" />
</div>
<div class="ft-publication" style="float:right">
<p>“Products are all natural from the ingredients to the physical bottles. A must have...”</p>
<img src="https://cdn.shopify.com/s/files/1/0838/7991/files/teenvogue.png?16842974685795887946" />
</div>
</div>
</div>
</div>
</html>
<style>
.row {
width: 1500px;
}
.tote-directions {
font-family: "NB";
font-size: 18px;
line-height: 26px;
}
.deodorant-thumbnail-mobile {
padding-bottom: 20px;
}
####################### CODE IN QUESTION ########################
.free-tote-second-div {
background-color: rgb(220, 136, 108);
text-align: center;
color: #fff;
height: 50px;
margin-top: 25px;
position: sticky;
position: -webkit-sticky;
-webkit-transform: translateZ(0);
bottom: 50px;
}
.free-tote-second-div h3 {
padding-top: 18px;
font-size: 16px;
}
.free-tote-third-div {
height: 350px;
background-size: cover;
background-position-x: 35%;
}
.free-tote-review-section {
height: 500px;
background-color: rgb(220, 136, 108);
text-align: center;
color: #fff;
}
.free-tote-review-section h1 {
padding-top: 50px;
padding-bottom: 50px;
font-size: 32px;
}
.free-tote-review {
padding-bottom: 50px;
}
.free-tote-review img {
width: 120px;
}
.ft-review-words {
font-family: 'NBH';
font-size: 20px;
margin: auto;
width: 95%;
line-height: 30px;
}
.ft-review-name {
padding-top: 20px;
}
.free-tote-product-carousel {
height: 425px;
text-align: center;
font-family: 'NB' !important;
}
.free-tote-product-carousel p {
font-size: 20px;
margin-top: 40px;
line-height: 26px;
}
.free-tote-product-name {
color: blue !important;
}
.free-tote-publications {
height: 600px;
background-color: rgb(220, 136, 108);
color: #000;
}
.ft-publication {
width: 48%;
color: #fff;
display: inline-block;
}
.ft-publication p {
font-size: 20px;
line-height: 26px;
padding-bottom: 20px;
font-weight: bold;
}
.ft-publication img {
width: 50%;
max-width: 150px;
}
.ft-pub-top {
padding-top: 50px;
width: 95%;
padding-left: 25px;
}
.ft-pub-bottom {
padding-top: 50px;
width: 95%;
padding-left: 25px;
}
@media (min-width: 1350px) {
.free-tote-publications {
margin-top: 125px !important;
}
}
@media (min-width: 1100px) {
.free-tote-publications {
height: 275px !important ;
margin-top: 75px;
}
.ft-top-div-words {
padding-left: 100px;
}
.free-tote-image {
margin-right: 100px;
}
.ft-pub-top {
width: 45%;
float: left;
margin-left: 40px;
padding-left: 0;
}
.ft-pub-bottom {
width: 45%;
float: right;
margin-right: 40px;
}
}
@media (min-width: 951px) {
.free-tote-image {
width: 33px;
margin-right: 150px;
}
.powr-image-slider {
display: none;
}
.ft-member-favorites {
display: block !important;
}
.free-tote-product-carousel p {
padding-bottom: 40px;
}
}
@media (min-width: 900px) {
.free-tote-image {
width: 33px;
margin-right: 150px;
}
}
@media (min-width: 797px) {
.free-tote-image {
display: block !important;
width: 33%;
float: right;
margin-right: 150px;
}
.ft-top-div-words {
width: 50%;
padding-top: 50px;
}
}
@media (min-width: 737px) {
.free-tote-top-div {
height: 450px;
}
.deodorant-thumbnail-mobile {
display: none;
}
.free-tote-image {
display: block !important;
width: 52%;
float: right;
margin-right: 10px;
max-width: 450px !important;
}
.ft-top-div-words {
width: 50%;
padding-top: 50px;
}
.ft-signup-btn {
display: block !important;
padding: 15px 0px 15px 15px;
width: 240px;
background-color: rgb(220, 136, 108);
color: #fff;
font-family: 'NBH';
margin-top: 50px;
}
.free-tote-third-div {
width: 50%;
float: left;
height: 500px;
}
.free-tote-review-section {
width: 50%;
float: right;
}
.free-tote-product-carousel {
clear: both;
margin-top: 550px;
margin-bottom: 20px;
}
.free-tote-second-div {
top: 55px;
}
.free-tote-second-div h3 {
padding-top: 14px;
}
}
@media (min-width: 525px) {
.free-tote-publications {
height: 500px;
}
}
@media (max-width: 400px) {
.free-tote-review-section h1 {
font-size: 26px;
}
.free-tote-review-section {
height: 550px;
width: 100%;
}
}
@media (max-width: 335px) {
.free-tote-review-section {
height: 600px;
}
}
@media (max-width: 313px) {
.free-tote-publications {
height: 700px;
}
}
我希望div .free-tote-second-div在滚动到屏幕时始终停留在屏幕底部。
答案 0 :(得分：0)
您可以使用以下代码将div粘贴到页面底部：
(defrule find-input-1
(object (is-a command_data)
(clock ?clock)
(value ?value))
=>
(printout t ?clock " " ?value crlf))
确保为移动视图修改了第281行，为桌面视图修改了第81行。