Html 固定按钮与滚动内容

早上好， 我目前正在进行一个项目，我需要在一个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>

{{template.title}}

---

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

这听起来像是flexbox的工作。下面是一个快速示例：

.container{
显示器：flex；
弯曲方向：立柱；
溢出：隐藏；
}
.身体{
flex:1自动；
溢出：自动；
}
页脚{
flex:0自动；
}
/*仅显示样式*/
.集装箱{
高度：200px；
宽度：500px；
背景：浅灰色；
}
页脚{
填充：12px；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。纳姆·菲尼伯斯·利伯罗（Nam finibus libero）位于威尼斯托托（tortor venenatis），ac mollis ante posuere。这是一个非常重要的问题。这是一个完整的生命，是一个充满变数和缺陷的生命。乌特·卢克图斯是一个乌贼。自由静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张静脉曲张。在奥古斯的前庭做一件事。库拉比图尔·沃里帕特、乌兰科珀·弗林利亚的麦格纳、内克·马萨·亨德雷特·奥奇、欧盟亨德雷特·埃尼姆·内克、nibh。
佩伦茨克猫科动物奥奇，康瓦利斯id马蒂斯ac，艾库利斯eu odio。Nam varius、sem faucibus semper aliquet、dui nisi pretium purus、sed malesuada libero neque a lacus。这句话的意思是：“我是胡思乱想。在urna a tempus处的整数pharetra。克拉斯和埃利特·多洛。比本杜姆土尔皮斯的奎斯克。潜力悬钩子。sapien ac nunc PAT lacinia中的整数。在拉科蒂斯拉科尼亚的生命之心。Nam eget aliquam libero。绿素营养素。悬韧带位于同侧。
这是一种很好的方法，它能让人感觉到身体的柔软。Vivamus拍卖人justo quis酵素。他是奥古斯，他是一个侵权人。Nam fringilla，非特优品种，无中间品种，purus vitae varius enim eget lacus。维瓦摩斯在莫莱斯蒂射精。莫比的名言，尼伯·埃利芬德·乌兰科珀之门，菲利斯·奎姆·法雷特拉·厄罗斯，在我的身体里。这是我的生命。毛里斯·杜洛尔（Mauris dui dolor）、伊卡利（lobortis iaculis leo ac）、维利特（mollis varius velit）。莫里斯·欧麦格纳·特里斯蒂克·苏西比特（NullaTincidunt mauris eu magna tristique suscipit）。我是临时奥奇·麦格纳。Suspendisse est nulla，accumsan nec aliquet拍卖行，ultrices vel odio。这句话的意思是：一位智者，一位智者，一位智者，一位智者，一位智者，一位智者，一位智者，一位智者，一位智者，一位智者，一位智者，一位智者，一位智者，一位智者。这是我们的梦想，也是我们的梦想。在阿尔库，丘脑是一种特殊的神经系统。马利苏阿达猫科动物的生活。库拉比图尔内克坦普斯泰勒斯。
多洛尔·奥奇，劳里特·欧·图皮斯，康瓦利斯·阿利奎姆·维利特。ipsum eget sodales中的Sed porttitor。在前庭的枕叶区。这是我的信仰。在调味品中加入苏利西汀，可以有效地抑制过敏反应。这是一个很好的例子。拍卖人arcu ac mauris posuere molestie。这是一个很好的例子。这是一个巨大的梦想。这是我的名言，萨吉蒂·埃尼姆等人的名言。非nibh egestas精英酒店，pulvinar调味品nulla tristique。在奥克托·里苏斯。埃涅亚大型猫科动物，未经许可的饮食，以及莫利斯酒后驾车。
这是一种非智者的生活。这是一个非常重要的问题。智者之间的整数，由毛里斯·埃格斯塔斯（mauris Egesta）的名言构成。这是一个很好的例子。Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比·泰勒斯·奥古斯（Morbi tellus augue），拉西尼亚（lacinia）在一个新的水平上，效率更高。库拉比图非尤伊斯莫·莫里斯，ac康塞特图梅特斯。不允许。大鼠妊娠节杖。莫比坐在自由女神的怀抱里。整型直径，钠质非硫化ut，accumsan nec ligula。
固定页脚
按钮

您可以使用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>

我的同僚们都是精英。尼莫裁判官公开谴责腐败行为、自我保护、类似行为、不受惩罚的行为！除其他原因外，其他原因的解决方案

夸姆，布兰迪提斯。错了，多洛尔·诺斯特鲁姆。嗯，是大黄蜂吗？赞美上帝，赞美上帝，赞美上帝，赞美上帝，赞美上帝

驱虫虫剂是一种全方位的补血药。Facere阻碍了beatae doloribus obecati temporalibus a illum eligendi解释说，在nam qui eveniet dolorem Laboraiosam

除此之外，罪魁祸首是一种类似的时间概念，它的别名是fugit ullam Consequeature molestiae velit Animal doloribus ducimus neque debitis，placeat omnis，quisquam deletus corruption to disependedus。身体，尼莫负号

这是一个巨大的动物错误减去omnis所说的错误后的结果，这是一个由劳动消费者承担的责任。哇，沃鲁帕提布斯

真理，不可剥夺的权利。特尼特共和国