修复滚动修复底部的div

Question

我有一个具有可滚动内容的弹出元素，但是在弹出窗口的底部我希望有一个固定元素，即使滚动内容也会保留在那里。

到目前为止，这是我的代码，正如您所看到的，红色块仍然滚动内容：

.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">&#xE5CD;</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">&#xE7FD;</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">&#xE316;</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">&#xE316;</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">&#xE5CD;</i></a></li>
                                    <li><a href="#">App0001.pdf <i class="material-icons">&#xE5CD;</i></a></li>
                                    <li><a href="#">App0003.pdf <i class="material-icons">&#xE5CD;</i></a></li>
                                    <li><a href="#">App0004.pdf <i class="material-icons">&#xE5CD;</i></a></li>
                                    <li><a href="#">App0005.pdf <i class="material-icons">&#xE5CD;</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">&#xE872;</i>
                        <p>Delete</p>
                    </a>
                </div>
                <div class="col--auto col--right">
                    <a href="#">
                        <p>Edit</p>
                        <i class="button material-icons">&#xE254;</i>
                    </a>
                </div>
            </div>
        </div>

        <!-- EDIT VIEW-->
        <div class="popup-edit">
            <div class="popup__close">
                <i class="button button--close material-icons">&#xE5CD;</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">&#xE5CD;</i>
                        <p>Cancel</p>
                    </a>
                </div>
                <div class="col--auto col--right">
                    <a href="#">
                        <p>Save</p>
                        <i class="button material-icons">&#xE5CA;</i>
                    </a>
                </div>
            </div>
        </div>
    </div>

Answer 1

如果您只想使用CSS，可以使用position:sticky - ＆gt;它正在将元素从固定更改为相对。但我建议你不要使用它，因为它不是很好支持（还）＆gt; CSS position:sticky

所以我会为这个问题建议一个javascript / jquery解决方案

无论如何，请参阅以下position:sticky

的代码段

如果您接受jquery解决方案，请告诉我

.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: sticky;
  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">&#xE5CD;</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">&#xE7FD;</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">&#xE316;</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">&#xE316;</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">&#xE5CD;</i></a></li>
                                    <li><a href="#">App0001.pdf <i class="material-icons">&#xE5CD;</i></a></li>
                                    <li><a href="#">App0003.pdf <i class="material-icons">&#xE5CD;</i></a></li>
                                    <li><a href="#">App0004.pdf <i class="material-icons">&#xE5CD;</i></a></li>
                                    <li><a href="#">App0005.pdf <i class="material-icons">&#xE5CD;</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">&#xE872;</i>
                        <p>Delete</p>
                    </a>
                </div>
                <div class="col--auto col--right">
                    <a href="#">
                        <p>Edit</p>
                        <i class="button material-icons">&#xE254;</i>
                    </a>
                </div>
            </div>
        </div>

        <!-- EDIT VIEW-->
        <div class="popup-edit">
            <div class="popup__close">
                <i class="button button--close material-icons">&#xE5CD;</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">&#xE5CD;</i>
                        <p>Cancel</p>
                    </a>
                </div>
                <div class="col--auto col--right">
                    <a href="#">
                        <p>Save</p>
                        <i class="button material-icons">&#xE5CA;</i>
                    </a>
                </div>
            </div>
        </div>
    </div>