fixed button with scrollable content - html

Question

Goodmorning,
I'm currently working on a project where I need to have a fixed button at the end of a div and then the ability to scroll the content of that div while still being able to see the button. Here is the code:
<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>
Inside of the .step div I print all the contents I need to visualize on my page, the button at the end of the code should actually be fixed. With that I mean that I should be able to scroll the content of div while still be able to see that button. I have tried with positioning without any results. Any recommendations? Thanks for your help in advance

Answer 1

This sounds like a job for flexbox. Here's a quick sample:
.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

You can use overflow:hidden; overflow-y:scroll; on the div with the content.
<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>
heres a codepen https://codepen.io/NeilWkz/pen/GzpqwB
On your example you add a height, and overflow:hidden; overflow-y: scroll; to the step class.

Answer 3

You can try this I just add <div class="popup">
<div class="popup-content"> and for the button I put the 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;
}
<div class="popup">
<div class="popup-content">
<p>Marty McLane has taught courses at each of our conferences. He is particularly adept at all things Ancestry.</p>
<p>Front-end development relies on organization and solid communication. Whether you're part of a team that builds large-scale sites or you're flying solo with a handful of quality clients, there are many pieces and steps to get a project from start to finish. And that's not just limited to the development phase of a project, either. Think about sales proposals, estimates, sign-offs, and approvals among many other things. There's a lot that goes into even what we might consider a routine … <p>Marty McLane has taught courses at each of our</p> conferences. He is particularly adept at all things Ancestry.</p>
<p>Front-end development relies on organization and solid communication. Whether you're part of a team that builds large-scale sites or you're flying solo with a handful of quality clients, there are many pieces and steps to get a project from start to finish. And that's not just limited to the development phase of a project, either. Think about sales proposals, estimates, sign-offs, and approvals among many other things. There's a lot that goes into even what we might consider a routine … <p>Marty McLane has taught courses at each of our</p> conferences. He is particularly adept at all things Ancestry.</p>
</div>
</div>
<div >
<button class="dismiss-popup-btn" type="button" data-ng-click="$ctrl.goToEdit()">button<span data-translate="GO_EDIT"></span> <span class="ti-pencil"></span></button>
</div>