container- @container
- height
- sticky
Fenêtre
Si vous scrollez la fenêtre, vous ne verrez rien de particulier. En revanche, si vous agrandissez la fenêtre avec le petit bouton situé en bas à droite de celle-ci, vous allez voir apparaître le header qui prend une position collante (sticky), ceci grâce à une requête de conteneur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at mauris luctus, posuere velit vel, tristique justo. Integer tempus sem commodo nisl ultricies hendrerit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at mauris luctus, posuere velit vel, tristique justo. Integer tempus sem commodo nisl ultricies hendrerit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at mauris luctus, posuere velit vel, tristique justo. Integer tempus sem commodo nisl ultricies hendrerit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at mauris luctus, posuere velit vel, tristique justo. Integer tempus sem commodo nisl ultricies hendrerit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at mauris luctus, posuere velit vel, tristique justo. Integer tempus sem commodo nisl ultricies hendrerit.
<div class="modal">
<div class="modal-cq">
<header>
<h2>Fenêtre</h2>
</header>
<div class="contenu">
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
</div>
</div>
*,
*::before,
*::after{
box-sizing: border-box
}
.modal-cq {
container: modal/size;
width:80%;
max-width: 350px;
min-height:240px;
max-height: 500px;
overflow-y: auto;
resize: vertical;
background-color: #fff;
}
@container modal (min-height: 300px) {
.modal header {
position: sticky;
top: 0;
box-shadow:0 0 10px rgba(0, 0, 0, 0.22)
}
}
.contenu {
padding: 1rem;
overflow:auto;
}
.contenu p:not(:last-child) {
margin-bottom: 1rem;
}
.modal {
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
/*inset:0*/
background-color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
}
.modal-cq header {
background: #fff;
}
.modal-cq header h2{
margin:0;
padding:1rem;
text-align: center;
font-size: 1.25rem;
font-size: clamp(1.25rem, 1.225rem + 0.125vw, 1.375rem);
}