スクロール修正の最後にdivを修正します

Question

私はスクロール可能なコンテンツを持っているポップアップ要素を持っていますが、ポップアップの一番下にはコンテンツがスクロールされていてもそこに留まる固定要素があります。あなただけのCSSを使用したい場合は

.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

、あなたがposition:stickyを使用することができます。ここでは

はこれまでのところ、あなたが見ることができるように私のコードで、赤いブロックは、まだコンテンツをスクロールします→要素を固定から相対に変更しています。しかし、私はので、私は position:sticky

以下でスニペットを参照、とにかくこの問題

ためのJavaScript/jQueryのソリューションをお勧めしCSS 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>