0
我有一个弹出式窗口元素，它具有可滚动的内容，但在弹出窗口的底部，我希望有一个固定的元素，即使内容滚动时也会停留在那里。在滚动修复的底部修复div
.popup {
position: fixed;
display: block;
top: 50%;
left: 50%;
max-height: 90%;
WIDTH: 100%;
max-width: 750px;
transform: translate(-50%, -50%);
z-index: 100;
overflow-x: hidden;
background-color: #fff;
border-radius: 6px;
}
.popup__close {
position: absolute;
top: 25px;
right: 25px;
cursor: pointer;
}
.popup__body {
padding: 50px 25px;
}
.popup__body .title {
margin: 0 0 40px 0;
font-size: 24px;
font-weight: 500;
font-family: "museo-sans", sans-serif;
}
.popup__body p {
font-size: 16px;
font-weight: 300;
font-family: "museo-sans", sans-serif;
line-height: 1.5;
color: #000;
}
.popup__body .form-field {
margin-bottom: 35px;
}
.popup__body .form-field:last-of-type {
margin-bottom: 0;
}
.popup__page-action {
position: fixed;
bottom: 0;
width: 100%;
padding: 30px 30px;
background: red;
border-top: 1px solid #efefef;
}
.popup__page-action .col--right {
margin-left: 12px;
}
.popup__page-action .col--right i {
margin: 0 0 0 15px;
}
.popup__page-action .col--left {
margin-right: 12px;
}
.popup__page-action .col--left i {
margin: 0 15px 0 0;
}
.popup__page-action a {
display: block;
}
.popup__page-action p {
display: inline-block;
vertical-align: middle;
font-size: 12px;
font-weight: 500;
font-family: "museo-sans", sans-serif;
color: #009b7a;
text-transform: uppercase;
}
.popup__page-action i {
display: inline-block;
vertical-align: middle;
color: #fff;
}
.popup-edit {
display: none;
}
.popup__accordion:first-of-type {
border-bottom: 1px solid #b4d8eb;
}
.popup__accordion .accordion__head {
padding: 10px 0;
}
.popup__accordion .accordion__head h4 {
color: #fff;
}
.popup__accordion .accordion__icon {
position: absolute;
top: 3px;
right: 0px;
font-size: 32px;
color: #fff;
}
.popup__accordion .accordion__body {
padding: 25px 0;
}
.popup__accordion label {
color: #fff;
}<div class="popup">
<!-- PREVIEW VIEW -->
<div class="popup-preview">
<div class="popup__close">
<i class="button button--close material-icons"></i>
</div>
<div class="popup__body">
<p class="title">Read "The life and times of a Developer"</p>
<div class="popup__diary-date">
<div class="col--auto col--align-middle">
<i class="material-icons"></i>
</div>
<div class="col--auto col--align-middle">
<h4>12.10.2017</h4>
</div>
<div class="col--auto col--align-middle">
<h5>4 Hours</h5>
</div>
</div>
<div class="popup__diary-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pulvinar urna ut felis ornare, vel consequat lorem commodo. Integer id ante luctus, egestas enim in, varius dolor. Vivamus eu lacus ante. Duis lacinia quam auctor dolor condimentum egestas. Phasellus bibendum magna sem, non ultricies nibh volutpat quis. Nulla auctor cursus bibendum. Vivamus fringilla in ipsum vestibulum rhoncus. Nullam id accumsan enim, accumsan volutpat est. Praesent imperdiet efficitur lacus, non placerat dolor. Vivamus consectetur ante nisi, in semper magna varius sit amet. Vivamus id dui sit amet sem consectetur pulvinar ut a libero. Donec ornare eu turpis at dictum. Aenean vitae augue non sapien tristique efficitur. In hac habitasse platea dictumst. Praesent iaculis nisi est, sit amet dignissim dui tempus in. Donec scelerisque facilisis nunc.</p>
<p>Morbi libero tortor, vehicula sed euismod ac, pretium et felis. Integer porttitor lobortis iaculis. Nam a ornare lectus. Aliquam nec ex ac orci rutrum tempus sed ut purus. Suspendisse tempus orci vitae nibh gravida dapibus in in nisl. Suspendisse accumsan faucibus sollicitudin.</p>
</div>
<div class="popup__accordion accordion bg--brand-3 bg-ext">
<div class="popup__accordion-head accordion__head">
<h4>Reflection</h4>
<i class="accordion__icon material-icons"></i>
</div>
<div class="popup__accordion-body accordion__body">
<div class="form-field">
<label for="editSrcDesc">Describe source of learning</label>
<textarea name="editSrcDesc" id="editSrcDesc" cols="30" rows="3"></textarea>
</div>
<div class="form-field">
<label for="editAims">What did you set out to learn?</label>
<textarea name="editAims" id="editAims" cols="30" rows="3"></textarea>
</div>
<div class="form-field">
<label for="editActions">What actions have resulted from the learning?</label>
<textarea name="editActions" id="editActions" cols="30" rows="3"></textarea>
</div>
</div>
</div>
<div class="popup__accordion accordion bg--brand-2 bg-ext">
<div class="popup__accordion-head accordion__head">
<h4>Evidence</h4>
<i class="accordion__icon material-icons"></i>
</div>
<div class="popup__accordion-body accordion__body">
<div class="form-field row">
<div class="col--6-12">
<div class="form-field">
<label for="upldEvidence">Upload evidence</label>
<input id="upldEvidence" type="file">
</div>
</div>
<div class="col--6-12">
<ul class="evidence-list evidence-list--remove">
<li><a href="#">App0002.pdf <i class="material-icons"></i></a></li>
<li><a href="#">App0001.pdf <i class="material-icons"></i></a></li>
<li><a href="#">App0003.pdf <i class="material-icons"></i></a></li>
<li><a href="#">App0004.pdf <i class="material-icons"></i></a></li>
<li><a href="#">App0005.pdf <i class="material-icons"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="popup__page-action row clearfix">
<div class="col--auto col--left">
<a href="#">
<i class="button button--red material-icons"></i>
<p>Delete</p>
</a>
</div>
<div class="col--auto col--right">
<a href="#">
<p>Edit</p>
<i class="button material-icons"></i>
</a>
</div>
</div>
</div>
<!-- EDIT VIEW-->
<div class="popup-edit">
<div class="popup__close">
<i class="button button--close material-icons"></i>
</div>
<div class="popup__body">
<p class="title">Edit Objective</p>
<div class="form-field">
<label for="editTitle">Title</label>
<input id="editTitle" type="text">
</div>
<div class="form-field">
<label for="editDate">Date</label>
<input id="editDate" type="date">
</div>
<div class="form-field">
<label for="editObjectives">Objectives</label>
<textarea name="editObjectives" id="editObjectives" cols="30" rows="10"></textarea>
</div>
<div class="form-field">
<label for="editRelated">Related Appraisal</label>
<select name="editRelated" id="editRelated">
<option value="App1">Appraisal 1</option>
<option value="App2">Appraisal 2</option>
<option value="App3">Appraisal 3</option>
<option value="App4">Appraisal 4</option>
</select>
</div>
</div>
<div class="popup__page-action row clearfix">
<div class="col--auto col--left">
<a href="#">
<i class="button button--red material-icons"></i>
<p>Cancel</p>
</a>
</div>
<div class="col--auto col--right">
<a href="#">
<p>Save</p>
<i class="button material-icons"></i>
</a>
</div>
</div>
</div>
</div>