html - 修复滚动修复底部的div

Question

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

到目前为止，这是我的代码，如您所见，红色 block 仍然随内容滚动:

.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 -> 它将元素从固定更改为相对。但我建议您不要使用它，因为它还没有得到很好的支持(但)> 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>