Bonjour, Je travaille actuellement sur un projet où je dois avoir un bouton fixe à la fin d'un div et ensuite la possibilité de faire défiler le contenu de ce div tout en pouvant toujours voir le bouton. Voici le 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>
A l'intérieur du .step div j'imprime tout le contenu dont j'ai besoin pour visualiser sur ma page, le bouton à la fin du code devrait en fait être corrigé. Avec cela, je veux dire que je devrais être capable de faire défiler le contenu de div tout en pouvant toujours voir ce bouton. J'ai essayé le positionnement sans aucun résultat. Des recommandations? Merci pour votre aide à l'avance
3 Réponses :
Cela ressemble à un travail pour flexbox. Voici un exemple rapide:
<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>
.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;
}
une idée comment faire cela sans flexbox?
Vous pouvez utiliser overflow: hidden; overflow-y: défilement; sur le div avec le contenu.
<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>
voici un codepen https: / /codepen.io/NeilWkz/pen/GzpqwB
Sur votre exemple, vous ajoutez une hauteur, et débordez: hidden; overflow-y: faire défiler; à la classe de pas.
pouvez-vous me montrer exactement comment faire cela avec mon code?
cet exemple fonctionne réellement, le seul problème est que le bouton est positionné à gauche du parent. comment centrer ça?
Vous pouvez mettre text-align: center sur le parent, dans ce cas .btn-wrap
Vous pouvez essayer ceci, j'ajoute simplement
et pour le bouton j'ai mis le class="dismiss-popup-btn"
<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>
.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;
}
Copie possible de div fixe dans la div de défilement