具有可滚动内容的固定按钮

Question

早安， 我目前在一个项目中，需要在div的末尾有一个固定的按钮，然后才能滚动该div的内容，同时仍然能够看到该按钮。这是代码：

<div id="ModalEmail" class="detailModalContainer">
<div class="detailModal">
    <div class="modalBoxHeader">
        <h4 translate="EMAIL"></h4>
        <div data-ng-click="$ctrl.close()">
            <span class="icon ti-close"></span>
        </div>
    </div>
    <div class="modalBody">
        <div class="step">


            <h4 data-translate="CHOOSE_TEMPLATE"></h4>
            <div class="template-list">
            <div class="template-item" data-ng-repeat="template in $ctrl.emailTemplates" data-ng-class="{ active: template === $ctrl.selectedTemplate }">
                <div class="template-info">
                    <span>{{template.title}}</span>
                    <span class="ti-check"></span>
                </div>
                <div class="use-template" data-ng-click="$ctrl.selectTemplate(template)" translate="USE_TEMPLATE"></div>
                <img class="template-preview" data-ng-src="data:image/jpeg;base64,{{template.preview}}" />
            </div><br /><br /></div>
            <span data-translate="CHOOSE_TEMPLATE_ERROR" class="labelPhoto" data-ng-class="{ labelShow: $ctrl.error }"></span><br /><br />
            <span data-translate="NO_TEMPLATES_AVAILABLE" class="labelPhoto" data-ng-class="{ labelShow: $ctrl.emailTemplates.length === 0 }"></span><br /><br />


            <div >
             <button class="btn btn-template customize" type="button" data-ng-click="$ctrl.goToEdit()"><span data-translate="GO_EDIT"></span> <span class="ti-pencil"></span></button>
            </div>
        </div>
    </div>
</div>

在.step div内，我将需要可视化的所有内容打印在页面上，代码末尾的按钮实际上应该是固定的。我的意思是，我应该能够滚动div的内容，同时仍然能够看到该按钮。我尝试过定位，但没有任何结果。有什么建议吗？感谢您的提前帮助

Answer 1

这听起来像是flexbox的工作。这是一个简单的示例：

.container {
display: flex;
flex-direction: column;
overflow: hidden;
}

.body {
flex: 1 1 auto;
overflow: auto;
}

footer {
flex: 0 0 auto;
}




/* display styles only */
.container {
  height: 200px;
  width: 500px;
  background: lightgray;
}

footer {
padding: 12px;
}

<div class="container">
  <div class="body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam finibus libero in tortor venenatis, ac mollis ante posuere. Phasellus quam velit, suscipit at urna et, dictum dictum massa. Integer nec quam vitae tortor pretium varius et ac lacus. Ut luctus a purus in ultricies. Suspendisse vehicula ex vitae libero varius suscipit. Donec a mi at augue vestibulum tempus. Curabitur volutpat, magna in ullamcorper fringilla, neque massa hendrerit orci, eu hendrerit enim neque at nibh.

Pellentesque felis orci, convallis id mattis ac, iaculis eu odio. Nam varius, sem faucibus semper aliquet, dui nisi pretium purus, sed malesuada libero neque a lacus. Cras vulputate ullamcorper justo, et pellentesque ante tincidunt non. Integer pharetra at urna a tempus. Cras et elit dolor. Quisque at bibendum turpis. Suspendisse potenti. Integer in sapien ac nunc volutpat lacinia. In facilisis diam vitae lobortis lacinia. Nam eget aliquam libero. Praesent elementum luctus imperdiet. Suspendisse sit amet dictum ipsum.

Etiam blandit nunc ut tellus lobortis, quis interdum diam mollis. Vivamus auctor justo quis fermentum fermentum. Fusce justo augue, eleifend ut placerat in, cursus a tortor. Nam fringilla, ex non varius ultrices, est nulla interdum dolor, vitae varius purus enim eget lacus. Vivamus vulputate eu purus at molestie. Morbi dictum, nibh eleifend porta ullamcorper, felis quam pharetra eros, in facilisis nibh velit ut mi. Cras faucibus pharetra nunc vitae finibus. Mauris dui dolor, lobortis iaculis leo ac, mollis varius velit. Nulla tincidunt mauris eu magna tristique suscipit. Sed tempor orci magna. Suspendisse est nulla, accumsan nec aliquet auctor, ultrices vel odio. Proin dapibus tortor vel lacus porttitor, ac tincidunt sapien faucibus. Sed neque urna, ornare vitae ultricies ut, rutrum et magna. Fusce pulvinar tellus ultrices nunc vulputate consequat a in arcu. Vivamus iaculis mi vel neque mattis, in malesuada felis mollis. Curabitur nec tempus tellus.

Cras dolor orci, laoreet eu turpis et, convallis aliquam velit. Sed porttitor in ipsum eget sodales. In vestibulum quam nec pulvinar ornare. Nulla ut consectetur tellus. Praesent sollicitudin condimentum tellus, efficitur dictum purus dictum sit amet. Maecenas ultricies libero id viverra varius. Praesent auctor arcu ac mauris posuere molestie. Quisque nisl nisi, aliquet vel venenatis eget, malesuada a lorem. Cras eget magna erat. Nunc quis erat dictum, sagittis enim et, placerat mauris. Curabitur consequat elit non nibh egestas, pulvinar condimentum nulla tristique. In ut auctor risus. Aenean magna felis, imperdiet quis lectus sed, ultrices mollis dui.

Aliquam non bibendum sapien, vitae euismod odio. Praesent consequat lobortis lectus nec dictum. Integer interdum sapien nibh, ac dictum mauris egestas sit amet. Sed pellentesque dolor id maximus pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tellus augue, lacinia in enim vel, eleifend efficitur ante. Curabitur non euismod mauris, ac consectetur metus. Nulla sed odio nunc. Integer placerat gravida scelerisque. Morbi sit amet neque id urna rhoncus faucibus non in libero. Integer diam quam, sodales non vulputate ut, accumsan nec ligula.
  </div>
  <footer>
  Fixed footer
  <button>Button</button>
  </footer>
</div>

Answer 2

您可以使用overflow：hidden;溢出-y：滚动;在div上显示内容。

<div class="outer">
  <div class="inner">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nemo voluptates exercitationem reprehenderit quo corrupti iste, facilis ipsa, similique, animi ducimus excepturi eaque sunt! Perferendis soluta modi ratione odio excepturi.</p>
      <p>Quam, blanditiis. Error, dolore nostrum. Hic, recusandae maxime? Laudantium fuga maxime obcaecati suscipit voluptas quod debitis quaerat reprehenderit maiores, alias fugiat molestias quae aliquam commodi eius quas neque beatae dolorem!</p>
      <p>Beatae quis repellendus, accusantium amet expedita nisi blanditiis eum omnis. Facere impedit beatae doloribus obcaecati temporibus a illum eligendi explicabo sed quia quo voluptas, sint nam qui eveniet dolorem laboriosam!</p>
      <p>Nostrum eum voluptas culpa accusamus excepturi, suscipit a similique tempora alias fugit ullam consequatur molestiae velit animi doloribus ducimus neque debitis, placeat omnis, quisquam delectus corrupti repellendus. Corporis, nemo minus.</p>
      <p>Velit magni voluptate animi error minus illo quisquam atque odit quaerat nam omnis, amet consequatur laboriosam eum assumenda reprehenderit debitis quos nesciunt unde perspiciatis nulla dolor a repellat. Eaque, voluptatibus!</p>
      <p>Veritatis, neque delectus. Repudiandae tenetur optio facilis voluptas aliquam nostrum placeat consequatur maiores dignissimos inventore voluptates, eum illo a aperiam dolor quod recusandae doloremque repellendus. Ratione doloribus nostrum distinctio dolores?</p>
      <p>Maiores et quae vel eveniet sint maxime totam quo reiciendis! Ea quam labore, asperiores voluptatibus animi reprehenderit quibusdam dolorum cupiditate sunt dicta dolore delectus expedita ducimus? Numquam culpa asperiores voluptatum.</p>
      <p>Ipsum, excepturi. Iure nisi cumque dolorem praesentium mollitia impedit aperiam explicabo similique, sit vero, doloribus, reprehenderit iusto qui numquam eum assumenda quod nostrum esse voluptatem facilis. Debitis quidem adipisci omnis.</p>
      <p>Delectus, nostrum dignissimos. Amet, ipsa incidunt explicabo vero perferendis autem laudantium et voluptatibus tempore officia debitis tenetur rem eveniet illo odio ipsam magnam impedit esse nostrum quas ipsum accusamus. Voluptatum.</p>
   </div>
<div class="btn-wrap"><button class="btn">Click Me</button></div>
</div>

<style>
.outer {
/* ignore this just for presentation*/
  max-width: 500px;

}
.inner {
overflow:hidden;
overflow-y:scroll;
height: 250px;

}
</style>

这是一个Codepen https://codepen.io/NeilWkz/pen/GzpqwB

在您的示例中，添加一个高度，然后溢出：隐藏；溢出y：滚动；进入步骤类。

Answer 3

您可以尝试一下，我只添加{print}                         <div class="popup">，对于<div class="popup-content">，我将button

class="dismiss-popup-btn"

.popup {
    position: absolute;
  display: flex;
  top: 0px;
  left: 0px;
    border: 2px solid #000;
    width: 520px;
    height: 150px;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
}
.popup p {
  margin: 0 0 10px 0;
}

.dismiss-popup-btn {
    position: absolute;
    top: 120px;
    right: 370px;
    width: 60px;
    height: 24px;
  font-size: 15px;
  line-height: 15px;
  text-align: center;
  
   
    background-color: #ffffe6;
}
.popup-content {
  padding-top: 30px;
  overflow-y: auto;
  padding: 20px;
}