Related
This question already has answers here:
Prevent content from expanding grid items
(3 answers)
Closed 12 months ago.
I'm trying to get the cyan box to scroll horizontally instead of triggering a horizontal scrollbar on the page.
It seems to break when I try using a grid layout; I had to horizontally scrolling before when I didn't use a grid.
How can I fix this? .page-wrap should fill the whole window and add vertical scrollbar as needed. Only the .boxs should scroll horizontally.
html {
overflow: hidden;
}
.page-wrap {
display: grid;
grid-template-areas:
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 60px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}
.sidebar {
background-color: green;
grid-area: sidebar;
}
.footer {
background-color: red;
grid-area: footer;
}
.main {
background-color: yellow;
grid-area: main;
}
.box {
background-color: cyan;
margin: 10px;
overflow-x: scroll;
}
<div class="page-wrap">
<div class="sidebar">sidebar</div>
<div class="main">
<div class="box">
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, modi laudantium facilis. Cum quasi dolore quam doloribus reprehenderit illum nostrum id quas ea. Nostrum adipisci dolor nulla veniam exercitationem ipsa.</td>
<td>Accusamus deserunt voluptatibus rem, aspernatur enim dolores, amet illum accusantium! Tempora, repellendus, fuga. Ex, consectetur mollitia reprehenderit qui, consequuntur ipsam maiores excepturi sapiente tempore odit repudiandae facere incidunt! Vero, beatae.</td>
<td>Et minus eaque corrupti voluptas, earum ex non similique. Officiis a dignissimos veritatis quas provident sunt? Fuga vel officia qui, numquam eos sint, totam aspernatur, commodi quis, temporibus animi excepturi!</td>
<td>Natus quaerat, sint nemo quia laudantium dolorem asperiores deserunt neque porro esse iusto reprehenderit et assumenda ipsum saepe consequuntur soluta officiis illum maiores cumque quos voluptate expedita tenetur eum autem!</td>
<td>Asperiores ducimus accusantium aliquid nemo aliquam fugiat culpa maxime repudiandae pariatur minus. Eum incidunt iste molestias officiis sunt nostrum facilis velit. Reprehenderit quis aut officia quas beatae assumenda esse asperiores.</td>
<td>Architecto, nam consequuntur odit distinctio! Suscipit fuga nam reprehenderit, nostrum modi provident iusto aperiam alias qui. Optio repudiandae reiciendis, omnis esse maiores! A blanditiis ducimus voluptate nobis exercitationem. Temporibus, vel!</td>
<td>Similique et est omnis fuga, ad earum sapiente. Nam qui est quidem. Dignissimos amet harum voluptate a, sint culpa autem et neque, natus quod cum eos laudantium molestias, dolorem optio.</td>
<td>Saepe aspernatur consequuntur sint nisi dolores nihil ab repudiandae, odio dolor, assumenda culpa corporis fugiat ullam officia quibusdam eaque enim, harum voluptatem eveniet reprehenderit natus consectetur deleniti nesciunt et! Omnis!</td>
<td>Nihil quas quod numquam ut fugiat doloremque repudiandae animi iusto. Ullam quidem ipsa dolorem quos veritatis adipisci quisquam obcaecati culpa et consequatur, aspernatur unde eligendi rerum labore ab odit asperiores.</td>
<td>Hic, aliquam, harum? Harum tempora accusantium animi ratione id perspiciatis quasi maiores iste odio quisquam, adipisci, laudantium cupiditate voluptatem mollitia soluta sunt eveniet facere quibusdam aspernatur? Suscipit obcaecati dolorum eligendi.</td>
<td>Possimus natus, dignissimos vero nesciunt cum voluptatibus reiciendis commodi maxime voluptates qui illo quia distinctio tempora perferendis fugit modi itaque, quis recusandae quisquam quos ullam alias! Voluptatum repellat mollitia incidunt.</td>
<td>Quod in ducimus, saepe obcaecati, eius vero ipsa ea cum reprehenderit velit sunt numquam eaque sapiente dolorem, possimus id nostrum natus eligendi accusamus nulla voluptatibus necessitatibus harum vitae. Dolorum, praesentium.</td>
<td>Ab iusto, dicta deleniti explicabo perspiciatis pariatur deserunt blanditiis vel accusantium. Tempore architecto fugit cum similique laudantium et veritatis id, quos deleniti eaque voluptatum laboriosam, natus commodi itaque veniam vel.</td>
<td>Dignissimos, quis excepturi, ratione nemo minima tenetur possimus. Quos eum placeat veniam voluptas, tempora, aliquam? Dolores ipsum obcaecati nisi itaque dolor, officiis quidem minima, nesciunt molestias facilis cupiditate repellat sequi.</td>
<td>Dolores asperiores quidem totam illo veniam! Natus architecto nulla et asperiores modi quaerat, sed! Quam cum rem voluptatibus, rerum pariatur deserunt fugit odit, totam blanditiis animi nulla nisi facilis saepe.</td>
<td>Quibusdam dolor explicabo soluta adipisci est quis aliquam tempora non, sint laudantium tempore minima inventore dolorum magni ad a rem magnam dignissimos expedita maxime numquam voluptas facere, quidem harum aliquid.</td>
<td>Facere dolorem, ullam quasi. Numquam alias maiores harum voluptate delectus quos totam architecto voluptatum, sapiente pariatur modi, autem culpa omnis facere commodi unde assumenda. Quaerat, rem deserunt. Beatae, voluptates, cum.</td>
<td>Magni pariatur eos quo perspiciatis ipsam a modi accusantium nulla fugiat officiis dolor ducimus hic, provident eius facilis quibusdam molestiae quasi, sunt, quis repellat nesciunt! Enim ipsum ducimus cumque placeat?</td>
<td>Recusandae porro, consectetur placeat, temporibus delectus nesciunt aliquid nam incidunt at ipsa accusantium hic maxime tempora dolorum! Totam reiciendis, consequatur deserunt eveniet natus, vitae ipsa voluptate repudiandae velit, quia aspernatur!</td>
<td>Et iusto ab repellat quae? Quas, ratione sapiente a, fuga voluptates, unde ullam dolores, fugit sint magnam perferendis ad quae. Magnam consequatur nisi quisquam, maiores quasi qui provident similique nobis.</td>
<td>Ab qui hic, incidunt consequuntur officia exercitationem laboriosam suscipit veritatis est deleniti, debitis reiciendis at quidem consequatur iure ut quisquam tempore delectus aut soluta sequi tenetur sed magnam nostrum. Ab?</td>
<td>Earum quis perspiciatis perferendis, rem, fugit cumque reiciendis! Porro consequatur quam consequuntur quaerat, atque praesentium adipisci fugit, dignissimos, ab labore reprehenderit provident temporibus, totam magnam illum pariatur deserunt alias cum!</td>
<td>Officiis sit quam vero nobis doloribus necessitatibus possimus. Veniam, totam! Illo magnam, ipsum consequuntur at, ipsam sit fuga rerum architecto eum libero officiis, nobis! Obcaecati incidunt, mollitia placeat eaque atque.</td>
<td>Nisi nam assumenda laudantium quos non quasi. Fuga enim, voluptatibus possimus tempora numquam dolores maiores, eum quaerat sit odit distinctio saepe optio aut accusamus explicabo, dolorem quidem consequatur. Maxime, similique!</td>
<td>Autem inventore expedita quibusdam ipsum. Consequuntur nulla in vero blanditiis deleniti dignissimos, earum eligendi voluptatibus, minus illo, perspiciatis doloremque nisi sed maiores tempora. Excepturi minima, officia incidunt vitae pariatur illo!</td>
<td>Sequi delectus dolorum, ea rem quis voluptatem accusantium quibusdam suscipit corrupti est laborum adipisci tenetur optio expedita inventore quam molestiae cupiditate totam. Rem sed, odit blanditiis eius quia vel eos.</td>
<td>Vero dolor nam quisquam reiciendis quibusdam id sapiente quia est veritatis facilis, expedita recusandae sequi iste tempora harum illum nihil. Amet laborum, accusamus soluta dolores et iure? Possimus, et? Iusto.</td>
<td>Ullam ipsum blanditiis obcaecati, rem aliquam voluptates fuga quo praesentium quia cum dignissimos debitis laboriosam itaque? Nostrum explicabo quae, rem praesentium accusantium dicta officia veritatis magni earum officiis. Inventore, ut.</td>
<td>Quisquam, ex, dolore. Voluptates porro eum, blanditiis ullam non sequi suscipit iste eius! Soluta, nam quia impedit veritatis laudantium id ea iure autem magnam sapiente, a modi omnis. Optio, animi!</td>
<td>Consequuntur amet, tenetur quidem consequatur doloremque distinctio ipsum minima, incidunt, fuga voluptatibus placeat quae autem recusandae quasi. Nihil, dolorum? Aliquid eligendi hic expedita saepe recusandae suscipit tempora tempore illum tenetur.</td>
</tr>
</table>
</div>
</div>
<div class="footer">footer</div>
</div>
Figured it out.
html {
overflow: hidden;
}
.page-wrap {
display: grid;
grid-template-areas:
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 60px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
overflow-x: auto;
}
.sidebar {
background-color: lime;
grid-area: sidebar;
}
.footer {
background-color: orange;
grid-area: footer;
}
.main {
background-color: yellow;
grid-area: main;
min-width: 0;
}
.box {
background-color: cyan;
margin: 10px;
overflow-x: scroll;
max-width: 100%;
}
<div class="page-wrap">
<div class="sidebar">sidebar</div>
<div class="main">
<div class="box">
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, modi laudantium facilis. Cum quasi dolore quam doloribus reprehenderit illum nostrum id quas ea. Nostrum adipisci dolor nulla veniam exercitationem ipsa.</td>
<td>Accusamus deserunt voluptatibus rem, aspernatur enim dolores, amet illum accusantium! Tempora, repellendus, fuga. Ex, consectetur mollitia reprehenderit qui, consequuntur ipsam maiores excepturi sapiente tempore odit repudiandae facere incidunt! Vero, beatae.</td>
<td>Et minus eaque corrupti voluptas, earum ex non similique. Officiis a dignissimos veritatis quas provident sunt? Fuga vel officia qui, numquam eos sint, totam aspernatur, commodi quis, temporibus animi excepturi!</td>
<td>Natus quaerat, sint nemo quia laudantium dolorem asperiores deserunt neque porro esse iusto reprehenderit et assumenda ipsum saepe consequuntur soluta officiis illum maiores cumque quos voluptate expedita tenetur eum autem!</td>
<td>Asperiores ducimus accusantium aliquid nemo aliquam fugiat culpa maxime repudiandae pariatur minus. Eum incidunt iste molestias officiis sunt nostrum facilis velit. Reprehenderit quis aut officia quas beatae assumenda esse asperiores.</td>
<td>Architecto, nam consequuntur odit distinctio! Suscipit fuga nam reprehenderit, nostrum modi provident iusto aperiam alias qui. Optio repudiandae reiciendis, omnis esse maiores! A blanditiis ducimus voluptate nobis exercitationem. Temporibus, vel!</td>
<td>Similique et est omnis fuga, ad earum sapiente. Nam qui est quidem. Dignissimos amet harum voluptate a, sint culpa autem et neque, natus quod cum eos laudantium molestias, dolorem optio.</td>
<td>Saepe aspernatur consequuntur sint nisi dolores nihil ab repudiandae, odio dolor, assumenda culpa corporis fugiat ullam officia quibusdam eaque enim, harum voluptatem eveniet reprehenderit natus consectetur deleniti nesciunt et! Omnis!</td>
<td>Nihil quas quod numquam ut fugiat doloremque repudiandae animi iusto. Ullam quidem ipsa dolorem quos veritatis adipisci quisquam obcaecati culpa et consequatur, aspernatur unde eligendi rerum labore ab odit asperiores.</td>
<td>Hic, aliquam, harum? Harum tempora accusantium animi ratione id perspiciatis quasi maiores iste odio quisquam, adipisci, laudantium cupiditate voluptatem mollitia soluta sunt eveniet facere quibusdam aspernatur? Suscipit obcaecati dolorum eligendi.</td>
<td>Possimus natus, dignissimos vero nesciunt cum voluptatibus reiciendis commodi maxime voluptates qui illo quia distinctio tempora perferendis fugit modi itaque, quis recusandae quisquam quos ullam alias! Voluptatum repellat mollitia incidunt.</td>
<td>Quod in ducimus, saepe obcaecati, eius vero ipsa ea cum reprehenderit velit sunt numquam eaque sapiente dolorem, possimus id nostrum natus eligendi accusamus nulla voluptatibus necessitatibus harum vitae. Dolorum, praesentium.</td>
<td>Ab iusto, dicta deleniti explicabo perspiciatis pariatur deserunt blanditiis vel accusantium. Tempore architecto fugit cum similique laudantium et veritatis id, quos deleniti eaque voluptatum laboriosam, natus commodi itaque veniam vel.</td>
<td>Dignissimos, quis excepturi, ratione nemo minima tenetur possimus. Quos eum placeat veniam voluptas, tempora, aliquam? Dolores ipsum obcaecati nisi itaque dolor, officiis quidem minima, nesciunt molestias facilis cupiditate repellat sequi.</td>
<td>Dolores asperiores quidem totam illo veniam! Natus architecto nulla et asperiores modi quaerat, sed! Quam cum rem voluptatibus, rerum pariatur deserunt fugit odit, totam blanditiis animi nulla nisi facilis saepe.</td>
<td>Quibusdam dolor explicabo soluta adipisci est quis aliquam tempora non, sint laudantium tempore minima inventore dolorum magni ad a rem magnam dignissimos expedita maxime numquam voluptas facere, quidem harum aliquid.</td>
<td>Facere dolorem, ullam quasi. Numquam alias maiores harum voluptate delectus quos totam architecto voluptatum, sapiente pariatur modi, autem culpa omnis facere commodi unde assumenda. Quaerat, rem deserunt. Beatae, voluptates, cum.</td>
<td>Magni pariatur eos quo perspiciatis ipsam a modi accusantium nulla fugiat officiis dolor ducimus hic, provident eius facilis quibusdam molestiae quasi, sunt, quis repellat nesciunt! Enim ipsum ducimus cumque placeat?</td>
<td>Recusandae porro, consectetur placeat, temporibus delectus nesciunt aliquid nam incidunt at ipsa accusantium hic maxime tempora dolorum! Totam reiciendis, consequatur deserunt eveniet natus, vitae ipsa voluptate repudiandae velit, quia aspernatur!</td>
<td>Et iusto ab repellat quae? Quas, ratione sapiente a, fuga voluptates, unde ullam dolores, fugit sint magnam perferendis ad quae. Magnam consequatur nisi quisquam, maiores quasi qui provident similique nobis.</td>
<td>Ab qui hic, incidunt consequuntur officia exercitationem laboriosam suscipit veritatis est deleniti, debitis reiciendis at quidem consequatur iure ut quisquam tempore delectus aut soluta sequi tenetur sed magnam nostrum. Ab?</td>
<td>Earum quis perspiciatis perferendis, rem, fugit cumque reiciendis! Porro consequatur quam consequuntur quaerat, atque praesentium adipisci fugit, dignissimos, ab labore reprehenderit provident temporibus, totam magnam illum pariatur deserunt alias cum!</td>
<td>Officiis sit quam vero nobis doloribus necessitatibus possimus. Veniam, totam! Illo magnam, ipsum consequuntur at, ipsam sit fuga rerum architecto eum libero officiis, nobis! Obcaecati incidunt, mollitia placeat eaque atque.</td>
<td>Nisi nam assumenda laudantium quos non quasi. Fuga enim, voluptatibus possimus tempora numquam dolores maiores, eum quaerat sit odit distinctio saepe optio aut accusamus explicabo, dolorem quidem consequatur. Maxime, similique!</td>
<td>Autem inventore expedita quibusdam ipsum. Consequuntur nulla in vero blanditiis deleniti dignissimos, earum eligendi voluptatibus, minus illo, perspiciatis doloremque nisi sed maiores tempora. Excepturi minima, officia incidunt vitae pariatur illo!</td>
<td>Sequi delectus dolorum, ea rem quis voluptatem accusantium quibusdam suscipit corrupti est laborum adipisci tenetur optio expedita inventore quam molestiae cupiditate totam. Rem sed, odit blanditiis eius quia vel eos.</td>
<td>Vero dolor nam quisquam reiciendis quibusdam id sapiente quia est veritatis facilis, expedita recusandae sequi iste tempora harum illum nihil. Amet laborum, accusamus soluta dolores et iure? Possimus, et? Iusto.</td>
<td>Ullam ipsum blanditiis obcaecati, rem aliquam voluptates fuga quo praesentium quia cum dignissimos debitis laboriosam itaque? Nostrum explicabo quae, rem praesentium accusantium dicta officia veritatis magni earum officiis. Inventore, ut.</td>
<td>Quisquam, ex, dolore. Voluptates porro eum, blanditiis ullam non sequi suscipit iste eius! Soluta, nam quia impedit veritatis laudantium id ea iure autem magnam sapiente, a modi omnis. Optio, animi!</td>
<td>Consequuntur amet, tenetur quidem consequatur doloremque distinctio ipsum minima, incidunt, fuga voluptatibus placeat quae autem recusandae quasi. Nihil, dolorum? Aliquid eligendi hic expedita saepe recusandae suscipit tempora tempore illum tenetur.</td>
</tr>
</table>
</div>
</div>
<div class="footer">footer</div>
</div>
I remembered an annoying quirk with flexbox, thought it might apply to grid too.
The trick is to add min-width: 0 to .main.
I have this modal solution I came up with. It works fine in Chrome and Edge, but there is a flaw in Firefox browser.
If the modal is higher than the screen the full modal should be scrollable, while the body should be not. Alas, I can only scroll the modal using the scrollbar to the right, but not with the mouse wheel.
Edit
This works fine in Firefox browser on stackoverflow, but the same code on codepen debug doesn't work!
console.clear();
;(function(d) {
"use strict";
d.addEventListener('click', function(e) {
var el = e.target.closest('[data-modal-trigger]')
if (el) {
var selector = el.dataset.modalTrigger;
Array.from(d.querySelectorAll(selector)).forEach(function(el) {
el.classList.add('active');
})
d.documentElement.classList.add('with-modal')
}
var el1 = e.target.closest('.modal-close');
var el2 = e.target.closest('.modal-backdrop');
if (el1 || el2) {
e.target.closest('.modal').classList.remove('active')
d.documentElement.classList.remove('with-modal')
}
})
})(document);
html.with-modal body {
height: 100vh;
overflow-y: hidden;
padding-right: 17px;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2000;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0s 1s;
transition: opacity 0s 1s;
overflow-y: scroll;
}
.modal.active {
opacity: 1;
-webkit-transition: opacity 0s;
transition: opacity 0s;
pointer-events: all;
}
.modal-backdrop {
z-index: -1;
position: fixed;
top: 0;
right: 17px;
bottom: 0;
left: 0;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
-webkit-transition: opacity 0.2s 0.3s linear;
transition: opacity 0.2s 0.3s linear;
pointer-events: none;
}
.modal.active .modal-backdrop {
opacity: 1;
pointer-events: all;
}
.modal-window {
background-color: #fff;
flex-basis: auto;
width: auto;
-webkit-box-flex: 0;
flex-grow: 0;
flex-shrink: 1;
border: 1px solid;
position: relative;
top: 25px;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
margin: auto;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-align: stretch;
align-items: stretch;
padding: 20px;
opacity: 0;
}
.modal.active .modal-window {
flex-basis: content;
top: 0;
opacity: 1;
}
.modal-content {
-webkit-box-flex: 1;
flex-grow: 1;
flex-basis: 100%;
}
.modal-close {
flex-basis: 40px;
padding: 10px;
box-sizing: border-box;
background-color: pink;
margin-left: auto;
color: red;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
cursor: pointer;
}
button {
border: 2px solid;
border-radius: 10px;
padding: 10px 20px;
background-color: lightgreen;
font-size: 20px;
margin: auto;
text-align: center;
}
<button data-modal-trigger="#my-modal">Click for modal</button>
<div class="region-modal">
<div class="modal" id="my-modal">
<div class="modal-window">
<div class="modal-close">Close</div>
<div class="modal-content">
<h2>My Modal</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos voluptatibus asperiores dolorem dicta veniam? Voluptatum reprehenderit maxime in perferendis sequi?</p>
<p>Id odit doloribus culpa perspiciatis reprehenderit pariatur labore magni fuga eos. Ipsum hic consequuntur delectus? Sapiente tempore dolorem eos aliquid!</p>
<p>Voluptatibus enim velit quasi vitae dolor sapiente ab excepturi iste, quos adipisci id ad quidem atque omnis amet! Eos, eligendi.</p>
<p>Nam culpa quo incidunt quaerat iure itaque, porro hic aperiam ducimus? Vel tempora unde nulla quisquam nisi facere expedita deserunt.</p>
<p>Sunt, minus tempore dignissimos pariatur eos modi at minima culpa nisi debitis ipsam nihil recusandae illum unde magni hic sint!</p>
<p>Veritatis minima excepturi nisi! Ex consectetur, asperiores iste laudantium voluptatem enim, possimus quae porro modi corporis pariatur, non est ratione!</p>
<p>Est consequatur amet dignissimos quibusdam veniam? Commodi qui voluptatum facilis hic? Quasi itaque illo facilis reiciendis, soluta sit maxime delectus?</p>
<p>Explicabo eos neque dolore similique illo illum soluta nulla eveniet! Facilis et ipsa quia asperiores vitae, dignissimos adipisci necessitatibus sed.</p>
<p>Corporis cumque est, nihil omnis possimus consequatur recusandae magnam quod, officia aut odio dolores distinctio nostrum et vitae, consequuntur provident?</p>
<p>Ipsam, quisquam ea magnam autem possimus, rem tempore doloribus, in amet ullam debitis facilis tenetur voluptas labore. Aperiam, quam libero?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, accusantium.</p>
<p>Numquam ea sint debitis voluptatem fuga tempore repudiandae architecto minima.</p>
<p>Quidem explicabo consequatur obcaecati quia nisi quisquam! Eligendi, vero dolor.</p>
<p>Eum cumque perspiciatis praesentium quae provident nobis, excepturi inventore culpa?</p>
<p>Veniam doloremque cupiditate repellat totam, dignissimos unde eaque mollitia a.</p>
<p>Dignissimos consequatur voluptatibus provident velit! Ea voluptas quia iste saepe?</p>
<p>Saepe, fugit cupiditate possimus enim veritatis repudiandae molestias accusamus iure?</p>
<p>Illo unde obcaecati repellendus tenetur, quam doloremque commodi voluptas sit?</p>
<p>Quibusdam velit enim totam amet quasi aperiam repudiandae beatae quia.</p>
<p>Corrupti repellat deleniti aliquid exercitationem! Magni repellendus ipsum quas minus.</p>
<p>Dolor nesciunt ducimus corporis illo dolores deleniti asperiores numquam inventore?</p>
<p>Ratione omnis cum labore consectetur sequi quam, facere qui rem.</p>
<p>Ratione nostrum quia ex quod debitis distinctio iure eligendi eum!</p>
<p>Sunt repudiandae omnis accusantium quidem ipsam corrupti ipsa at vel!</p>
<p>A quasi fugit animi ullam. Dolor dolore incidunt libero velit.</p>
<p>Optio ducimus officia dolor quis, consectetur numquam blanditiis asperiores magnam?</p>
<p>Porro aspernatur suscipit officiis veritatis a quo, earum eos sapiente!</p>
<p>Magnam hic veritatis at. Iste tempora fugit quaerat deserunt qui?</p>
<p>Temporibus excepturi iste harum recusandae aliquid omnis corporis rem iure.</p>
<p>Fugit aut placeat facere suscipit. Magni amet sunt omnis quisquam?</p>
</div>
</div>
<div class="modal-backdrop"></div>
</div>
</div>
<h1>Scroll and modal</h1>
<p>Some scrolling content</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam delectus excepturi, fuga adipisci, deserunt culpa recusandae doloremque debitis non doloribus magnam reprehenderit maxime aut quaerat quam possimus fugit, voluptatem ab beatae reiciendis aperiam error. Explicabo quas necessitatibus cum enim vitae! Dicta maxime ea nam iusto ab reprehenderit placeat blanditiis numquam quam voluptates itaque, commodi aliquid deleniti natus dolorum unde sint. In quasi incidunt iure, repudiandae reiciendis inventore voluptatem modi facilis tempora maxime atque reprehenderit minus dolores neque exercitationem? Quisquam animi alias laudantium esse dicta molestiae ullam ipsum delectus culpa nemo nobis deserunt id, dolore minus. Perferendis ratione libero voluptate tempore fugiat modi, excepturi labore unde soluta ipsa asperiores molestias, corporis sapiente voluptatem distinctio nobis architecto. Ut facere sapiente ipsam inventore tempore architecto tempora officiis, laboriosam natus ea itaque consequatur. Error eum repellendus, perferendis deleniti qui quam voluptatem sint in sapiente eaque illo facilis minus ducimus ex officiis laudantium officia soluta suscipit debitis, recusandae eligendi, unde consectetur facere quasi. Neque corrupti asperiores deserunt eos corporis minima ex. Et a fuga in porro aspernatur quis veniam, repudiandae voluptatum eligendi cumque delectus, iusto voluptatem fugit maiores molestiae vel dolore impedit error. Vitae illo doloremque error totam id et veritatis earum eligendi placeat iste!</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Magni illo animi maxime deleniti dolorem a, reprehenderit aut hic iure! Ipsam, eaque voluptates? Voluptates, cum porro. Rerum deserunt iste labore mollitia expedita doloribus reprehenderit eos quae ducimus debitis fugiat quasi molestias in illum accusamus quisquam ipsum dicta eius nemo modi, adipisci unde incidunt! Repellendus ad nihil fuga tempora nobis? Magni omnis, ea alias pariatur eligendi doloribus, adipisci laborum possimus maxime provident esse! Ullam similique ducimus quod unde culpa ipsa illum nisi aut aspernatur consequuntur assumenda neque nihil quam ipsum, eius suscipit eligendi. Optio est, illo aut reiciendis alias corporis! Dolorum omnis facilis similique labore ab laboriosam repudiandae magnam voluptatibus, iusto praesentium! Illum laudantium consectetur molestiae nulla voluptatibus consequuntur? Quas natus iure harum praesentium deleniti rem fuga quidem, sit sequi. Quod consequatur voluptatibus quas unde officia laborum expedita quaerat vero, facilis, nemo excepturi nobis iure repellat explicabo eius atque accusamus ex tempore. Cumque aliquam mollitia, provident iste quasi maxime, quod voluptatum fugit at accusantium vitae. Aperiam soluta nobis iusto incidunt non aspernatur nihil cumque eum vero commodi animi in, quasi deleniti doloremque earum reprehenderit officiis praesentium. Totam illum quod dolorum sequi placeat temporibus odit quis, doloribus ratione repellendus? Itaque et fuga illo cumque aliquam voluptatem magni laudantium fugiat nemo obcaecati.</p>
<p>Est iure, laboriosam sint quibusdam corrupti magni a minus repudiandae, incidunt autem consequuntur dolorem cumque eaque, nulla facere illum veritatis. Voluptatibus rerum fugiat iusto hic animi distinctio. Officiis, atque. Laboriosam excepturi iure quaerat exercitationem architecto optio laudantium, id amet dolores fugit ullam harum itaque nesciunt, at enim neque quam consectetur eveniet! Libero ex quos pariatur quaerat esse quas dolore praesentium in ipsam ab aut at expedita nam a soluta consequatur ducimus iusto rem voluptate laborum, dolorum quod veniam? Nihil accusamus quis ratione nemo beatae provident sequi ea ipsam quia explicabo quasi molestias voluptatum eius nostrum, modi sunt voluptate! Perspiciatis vitae voluptatibus quos ea optio perferendis minus repellendus a, ut tempora maiores beatae! Tempora impedit nesciunt ab dolore odit ipsa quia soluta illum! Explicabo dolorem molestiae fuga blanditiis, fugit commodi vitae ab non! Itaque veniam facere pariatur eius saepe ipsam incidunt numquam deleniti similique tempora? Doloribus natus architecto nulla vitae ullam ipsam fugiat maiores officia deleniti a, iure asperiores esse velit alias culpa? Nisi obcaecati, iste sequi officiis aliquam aut commodi vitae consequatur ea molestias sint eligendi ut dolore eveniet consectetur laborum quos natus cum quia molestiae explicabo id. A excepturi cumque porro vero nulla voluptate harum atque animi deleniti voluptas?</p>
<p>Ipsa esse dolor, dicta quis quod hic fugit quaerat repudiandae nobis cum voluptatem expedita amet tempora sed atque repellendus, cumque consequuntur iste adipisci quae aliquam ex sapiente corrupti? Quia numquam obcaecati nesciunt. Nisi quis cupiditate obcaecati at, nesciunt quae ipsum repellendus distinctio facilis ut architecto repellat explicabo impedit hic ex recusandae cum excepturi quisquam beatae sint fugiat, laboriosam blanditiis ratione. Veritatis accusamus quis totam et dignissimos, deserunt cumque quisquam amet eveniet ratione error autem ipsa maxime ducimus, voluptate, architecto nemo incidunt molestiae id. Saepe necessitatibus ipsam ad atque ullam quisquam maxime, soluta nemo voluptates corrupti mollitia praesentium, aliquam rem facilis ipsum deserunt perspiciatis autem animi quia commodi possimus! Consequuntur in nam sit hic temporibus aliquam. Amet alias, nobis exercitationem, veritatis nesciunt sit necessitatibus doloremque fugiat ullam rerum quia libero. Iste quaerat, totam labore qui provident eum sunt dolorem fugit facere dolorum quasi rem! Iste velit obcaecati aliquam maxime totam animi, harum labore vitae quos voluptates culpa earum quo, quibusdam explicabo eius nesciunt assumenda nulla natus, quae non ut dolorum nemo hic! Neque blanditiis molestiae esse ad laudantium, cum nostrum non alias nihil! Neque nostrum quam iste commodi consequatur obcaecati quibusdam ipsa corporis ut exercitationem rerum minima, facere aspernatur praesentium vitae.</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Necessitatibus, deserunt vero aut reiciendis omnis adipisci in aspernatur officia exercitationem, fuga perferendis alias maxime eum odio! Officia, exercitationem? Magnam cum sequi at totam distinctio libero animi non doloribus odio quisquam commodi quaerat, culpa cupiditate voluptatum impedit sapiente reprehenderit odit aspernatur. Quasi mollitia saepe commodi tempora inventore adipisci voluptatem eius et aperiam nemo maiores ipsam corrupti, impedit numquam repudiandae illo voluptate! Error nihil repellendus numquam similique cum in assumenda eligendi accusantium, saepe, consequuntur repudiandae neque fugiat aperiam delectus vero eum atque! Hic nostrum deleniti quos rem velit ad pariatur sit recusandae distinctio corrupti, et fugiat. Beatae nobis obcaecati esse fugit at culpa consectetur, accusamus suscipit necessitatibus, maxime pariatur ipsa? Suscipit quaerat pariatur accusamus debitis vitae neque eos odio, quod qui ad, explicabo quae rem necessitatibus sunt corrupti deserunt minima voluptatem laudantium obcaecati illum aliquid velit doloremque molestias? Hic fuga debitis explicabo neque quaerat ratione est totam cumque eius tempore necessitatibus at eos, sequi veritatis perferendis numquam ducimus sit nisi iusto doloribus. Dolor a doloremque maiores ipsum expedita? Deleniti deserunt delectus iste iusto aspernatur quo, dolorem ipsum, modi nulla, accusamus quam a eius natus nisi id in neque explicabo nesciunt at harum labore eaque ratione molestias! Officiis delectus facere error tenetur?</p>
<p>Magni possimus necessitatibus voluptate nobis voluptatibus minima odio atque at neque similique natus, totam obcaecati harum qui? Vero molestiae laborum accusantium reprehenderit consectetur, nobis veniam ea praesentium vel soluta hic, dolore assumenda, accusamus fugit voluptatum totam delectus ut minima at autem nam dignissimos illum veritatis explicabo? Explicabo harum animi commodi adipisci ab totam expedita. Cum atque maiores perspiciatis. Similique eos commodi, rem, tenetur placeat reprehenderit unde fugit, qui at sed corrupti! Sapiente, minus sint possimus itaque facere, voluptate illo officiis nesciunt accusantium recusandae maxime blanditiis doloribus. Odit asperiores quis illo quasi obcaecati ipsa, commodi beatae labore voluptates, vel quo neque, enim reprehenderit iste rerum debitis quisquam! Esse, maiores atque! Maxime eligendi eaque delectus eum, aut necessitatibus ad? A, accusamus! Quos, harum pariatur nostrum delectus dolores corrupti, repellendus vel blanditiis rem laboriosam laudantium quam perspiciatis incidunt dignissimos voluptatibus, minus voluptas ducimus fugit veritatis similique. Repudiandae possimus autem quod! Repudiandae eos perferendis libero nihil, dolores harum. Dolorum eos eligendi sequi odit at molestias mollitia libero nemo illum, excepturi, in temporibus, necessitatibus velit officia nam quidem laudantium dolore delectus non aliquam. Hic libero earum consequatur maiores nesciunt sequi, atque reprehenderit ipsa quos odit unde aperiam omnis, vitae quod, laborum accusantium perspiciatis dolorum ratione?</p>
<p>Sunt dolore ratione excepturi tempore voluptatum voluptas consequatur reiciendis, harum eaque mollitia beatae natus dolorem dolorum atque at consequuntur quaerat. Mollitia, iusto dicta. Nulla ea dolores similique aliquid possimus, pariatur a saepe iusto aut veritatis voluptatibus assumenda animi nam nobis esse tempore, asperiores numquam maiores. Consequuntur saepe fugiat ipsum excepturi, non corporis eum aut dignissimos. Consequatur nesciunt laborum earum consectetur reprehenderit voluptate molestias quidem, deleniti quae tempore sequi. Tempora architecto a accusantium odio voluptates aliquam autem suscipit provident sit asperiores incidunt illum ducimus facilis, molestias, inventore mollitia! Atque provident odio soluta deserunt quisquam tenetur quae molestias magnam ex, sed culpa nulla fuga corporis vero maxime quidem mollitia facere. Illo et non perspiciatis consequatur nobis temporibus eveniet nulla aut quae animi facilis veritatis minus, recusandae fugiat odit atque! Natus beatae velit possimus repellendus, perspiciatis vero culpa voluptatem quia atque quos doloribus nostrum fuga cum ea. Accusamus officia numquam praesentium sapiente! Tenetur sed harum itaque maxime ea velit, dolor doloremque soluta natus libero tempore similique adipisci optio dolorem aut accusamus in ut vel quaerat, inventore veniam quis. Explicabo, ipsum temporibus saepe ad, libero consectetur adipisci amet quaerat placeat rem sit dolore fugiat cupiditate porro quod commodi expedita totam veniam. Reiciendis, consequuntur nostrum!</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Voluptas odit dicta laudantium temporibus unde nesciunt repellendus asperiores incidunt consectetur! Accusantium quis dolorum eveniet quos atque voluptas amet! Iure quo nam alias, veniam hic totam quia voluptates dolorem quibusdam eum fuga enim sunt laudantium velit, ducimus doloremque omnis quae delectus explicabo quis sed. Voluptate, eius fugiat odio minima sapiente ut illo error molestiae, repellat exercitationem nesciunt sit iste earum provident reprehenderit? A, distinctio. Cupiditate magni eius eligendi atque et rerum dicta illo sequi voluptates esse dolores, ducimus corporis laudantium in eos accusantium temporibus delectus vel quidem dolor repudiandae numquam libero officiis non? Commodi nostrum doloribus officiis hic doloremque, corporis rerum harum dolore eum quia voluptatibus inventore at sapiente consequatur laudantium quos quaerat vero? Voluptates modi ut totam aliquid laudantium consequuntur beatae odio tempore iusto officiis exercitationem, animi quos, dignissimos voluptatibus quas ad eaque. Nam, repellendus numquam veniam excepturi inventore iusto non accusantium eaque corporis laboriosam ipsa at modi recusandae atque perspiciatis. Ab doloribus animi unde eaque cumque esse, sint qui suscipit earum magni provident labore, velit, ipsam inventore veniam reiciendis officia voluptas sequi quisquam impedit? Ut laborum magnam a iusto? Assumenda quidem expedita laudantium vero! Quos soluta, magni nemo ipsa ratione incidunt eius nihil facilis? Rerum corporis iure eligendi.</p>
<p>Inventore obcaecati reprehenderit, corporis repellendus, possimus velit vel alias, id voluptate eaque voluptatem numquam eveniet nostrum? Ab vel, illo consectetur quas beatae repudiandae error vero quam dolorum quasi velit aut iure! Totam nemo perferendis velit quidem adipisci reprehenderit molestias optio pariatur doloremque reiciendis repellat repellendus blanditiis error a ratione laudantium nobis aliquam, dolorem numquam porro sapiente. Amet inventore corporis suscipit natus est sunt, laborum excepturi rerum, quasi sequi commodi placeat officiis nobis. Voluptate, error odit! Blanditiis laborum, nihil quo quas reprehenderit aspernatur cupiditate explicabo! Sint magnam nesciunt eligendi nostrum cumque, dolor saepe est quidem nihil consectetur, laborum soluta, accusamus doloremque. Rerum modi sapiente aliquam dolore itaque, voluptatibus tempore atque consequuntur maxime omnis recusandae quo quaerat laborum aspernatur possimus dolorem earum adipisci, non, excepturi quia! Iusto et repellendus inventore eligendi magnam, quae beatae numquam aliquam animi incidunt officia similique qui cumque. Fugit est deserunt rerum, assumenda eligendi, voluptatibus corporis sed qui minus doloribus officia esse sit sint earum veniam. Magnam ipsum ipsam aliquam doloribus magni a perspiciatis qui beatae blanditiis dolorum, aliquid nemo impedit omnis numquam expedita mollitia, quos assumenda necessitatibus quas. Ipsam rem voluptas delectus ipsa ratione! Optio, distinctio dicta. Unde id harum dolorem sed velit, impedit distinctio dignissimos error.</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Laborum exercitationem quas ex! Nostrum quaerat eaque itaque repudiandae expedita dolores sapiente quia non hic obcaecati, tempora error quo facilis ut quas adipisci voluptatum voluptate, qui temporibus! Eveniet corporis molestiae sapiente, omnis nostrum quod consectetur at error velit aspernatur vero non illum quidem voluptates laboriosam molestias! Porro nobis, soluta cum laboriosam dolore delectus amet reprehenderit adipisci! Quis enim praesentium officiis voluptatum quasi, totam corporis vero sit, laboriosam beatae, nam ab! Molestias id amet impedit maxime cupiditate iure officiis, ad ipsum ipsam excepturi corrupti praesentium velit repellendus quo facilis? Officia recusandae nobis nemo fugiat iste id explicabo asperiores non quis rerum tempora repellendus necessitatibus error unde quam ea ratione autem quaerat est hic quia deserunt, doloremque aspernatur. Quos inventore enim perspiciatis illum voluptatibus officia voluptas molestiae eveniet consectetur eos voluptatem, tempore necessitatibus eius mollitia reiciendis aut ullam aspernatur aliquid nihil expedita nisi accusantium sunt quam dolorum. Natus sit sequi itaque ut, ex, maiores aspernatur magni nostrum ad ratione assumenda qui hic? Similique molestiae aperiam quae laudantium pariatur quibusdam, quidem provident ducimus, modi blanditiis sed? Recusandae, iure? Nihil laborum rerum adipisci tenetur aspernatur quas asperiores. Deserunt amet, veniam doloremque pariatur nisi et quis commodi voluptates error cumque modi inventore optio, tempore fugiat.</p>
<p>Totam, quod et tenetur officiis consequuntur laboriosam provident dicta unde placeat, expedita ad sit voluptas molestiae ipsam voluptatibus omnis, magni id sunt esse modi distinctio exercitationem? Saepe unde repudiandae enim dolor explicabo possimus vel quisquam cumque. Minus dolorem vitae, qui at facilis dicta tenetur quos aut corrupti nisi doloremque asperiores ab sint hic, laudantium eveniet. Alias iste tempora obcaecati dignissimos delectus nesciunt tenetur mollitia eum architecto officiis quas odit, quo magni, beatae accusamus asperiores eius facere, corrupti provident earum dicta laboriosam blanditiis esse libero! Aspernatur omnis iste sit, magni facere possimus ea provident officiis rerum ducimus similique natus neque suscipit incidunt repellat perspiciatis, itaque iure. Pariatur nesciunt libero rerum inventore? Nobis aperiam, nostrum odio facilis id animi atque provident hic dolorem quas fugit earum velit ratione qui ipsam repellendus ut sit omnis facere libero ex neque? Provident error ducimus modi magnam fuga, ex eveniet omnis earum sed magni at asperiores harum, veniam quidem perferendis. Dicta ab voluptates ipsum quas expedita eligendi voluptate praesentium, consequuntur harum qui eum veniam maiores in molestiae aliquid, totam quod officiis asperiores ex necessitatibus. Saepe porro unde dicta beatae consectetur provident quidem suscipit, sed laborum sit, doloribus expedita mollitia aliquam adipisci necessitatibus pariatur veniam laudantium sequi?</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Aperiam, fugit ipsam. Minus quaerat nesciunt eum iure architecto, exercitationem laudantium corporis quos quam odio repellendus, accusamus qui dolor vitae numquam suscipit debitis, amet eaque perferendis quasi doloremque. Sit sapiente nihil corporis mollitia placeat tenetur eius fuga quisquam quam, dignissimos, possimus aspernatur. Praesentium magnam obcaecati, vitae deserunt inventore dolorem aspernatur impedit laboriosam quae deleniti nesciunt, animi amet totam est eum delectus incidunt id quisquam sapiente labore sint ad ipsa dignissimos. Officia ipsum quis minus sapiente corrupti quasi eius iste unde distinctio ducimus voluptatum vitae perferendis, iusto cupiditate optio laborum veniam ex dolorum, dolores omnis! Repellat perspiciatis quidem, molestiae reprehenderit a aliquam, modi obcaecati voluptatum, iste expedita itaque non. Error atque fugiat sunt ab. Ullam, ipsam id! Sunt fugit maxime incidunt illum reprehenderit deserunt qui iste quisquam natus labore eveniet ut porro ab eos commodi consequuntur eum delectus quaerat, molestias, architecto obcaecati. Unde aliquam exercitationem numquam corrupti recusandae autem ratione animi voluptas. Laborum adipisci aperiam consequuntur dolorum dolor aspernatur rerum cum impedit harum vel, animi quaerat, magnam consectetur optio sunt assumenda! Eius tenetur nam fugiat voluptatibus dignissimos ipsum, aperiam sint delectus ab, reiciendis in voluptatem tempore optio. Numquam mollitia quis vero sequi, nisi tempore fuga ducimus doloremque a nostrum, praesentium id.</p>
<p>Consequatur, velit, fuga harum nam quod commodi esse tempora laboriosam exercitationem reiciendis veniam, fugit expedita. Vitae, doloremque? Ex similique saepe perferendis iste autem veniam aliquid, harum minus? Molestias nobis eaque inventore saepe similique et vero autem eveniet repellendus. Excepturi magnam dignissimos, consectetur unde in expedita praesentium possimus consequuntur quaerat corporis beatae nobis minus. Molestias, harum ut! Dolores distinctio, quo placeat nam obcaecati cupiditate voluptatem nemo? A suscipit placeat quas iusto impedit. Libero ipsam excepturi ipsum quam, animi laboriosam sapiente nostrum necessitatibus quas ea pariatur error explicabo quos consectetur ullam nihil odit? Voluptatem animi repellat rem inventore, repudiandae saepe laborum culpa nihil deleniti corporis. Nostrum reprehenderit recusandae consectetur, quaerat autem natus vitae. Soluta nemo quisquam adipisci cupiditate similique architecto, quam ab corporis harum suscipit quo est, iusto quod earum modi necessitatibus, asperiores ratione sunt animi voluptatum? Eveniet, adipisci illo nemo pariatur ut nisi impedit sint debitis reiciendis nihil, illum dicta cupiditate quo quidem, est laborum minima fugit. Autem fuga eligendi necessitatibus obcaecati temporibus aspernatur, ullam deserunt illum nulla voluptatum mollitia, suscipit odio, placeat molestias. Ullam harum aliquid, voluptate est nam commodi tenetur ut repellat vel quaerat. Sed cupiditate voluptatibus eveniet non aspernatur consequuntur pariatur molestiae magnam, quis, dolorem nemo aperiam impedit.</p><button data-modal-trigger="#my-modal">Click for modal</button>
It is the pointer-events: all on the .modal-backdrop that hinders the scrolling, as somehow the scrollwheel events don't pass through.
I needed to change the JavaScript a little bit
/* ... */
/* CSS */
modal.active .modal-backdrop {
/* pointer-events: all */
}
/* ... */
// JavaScript
// ...
// var el2 = e.target.closest('.modal-backdrop');
// if (el1 || el2) {
var el2 = e.target.closest('.modal-window');
if (el1 || !el2) {
// ...
console.clear();
;(function(d) {
"use strict";
d.addEventListener('click', function(e) {
var el = e.target.closest('[data-modal-trigger]')
if (el) {
var selector = el.dataset.modalTrigger;
Array.from(d.querySelectorAll(selector)).forEach(function(el) {
el.classList.add('active');
})
d.documentElement.classList.add('with-modal')
}
var el1 = e.target.closest('.modal-close');
var el2 = e.target.closest('.modal-window');
if (el1 || !el2) {
e.target.closest('.modal').classList.remove('active')
d.documentElement.classList.remove('with-modal')
}
})
})(document);
html.with-modal body {
height: 100vh;
overflow-y: hidden;
padding-right: 17px;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2000;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0s 1s;
transition: opacity 0s 1s;
overflow-y: scroll;
}
.modal.active {
opacity: 1;
-webkit-transition: opacity 0s;
transition: opacity 0s;
pointer-events: all;
}
.modal-backdrop {
z-index: -1;
position: fixed;
top: 0;
right: 17px;
bottom: 0;
left: 0;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
-webkit-transition: opacity 0.2s 0.3s linear;
transition: opacity 0.2s 0.3s linear;
pointer-events: none;
}
.modal.active .modal-backdrop {
opacity: 1;
/* pointer-events: all; */
}
.modal-window {
background-color: #fff;
flex-basis: auto;
width: auto;
-webkit-box-flex: 0;
flex-grow: 0;
flex-shrink: 1;
border: 1px solid;
position: relative;
top: 25px;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
margin: auto;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-align: stretch;
align-items: stretch;
padding: 20px;
opacity: 0;
}
.modal.active .modal-window {
flex-basis: content;
top: 0;
opacity: 1;
}
.modal-content {
-webkit-box-flex: 1;
flex-grow: 1;
flex-basis: 100%;
}
.modal-close {
flex-basis: 40px;
padding: 10px;
box-sizing: border-box;
background-color: pink;
margin-left: auto;
color: red;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
cursor: pointer;
}
button {
border: 2px solid;
border-radius: 10px;
padding: 10px 20px;
background-color: lightgreen;
font-size: 20px;
margin: auto;
text-align: center;
}
<button data-modal-trigger="#my-modal">Click for modal</button>
<div class="region-modal">
<div class="modal" id="my-modal">
<div class="modal-window">
<div class="modal-close">Close</div>
<div class="modal-content">
<h2>My Modal</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos voluptatibus asperiores dolorem dicta veniam? Voluptatum reprehenderit maxime in perferendis sequi?</p>
<p>Id odit doloribus culpa perspiciatis reprehenderit pariatur labore magni fuga eos. Ipsum hic consequuntur delectus? Sapiente tempore dolorem eos aliquid!</p>
<p>Voluptatibus enim velit quasi vitae dolor sapiente ab excepturi iste, quos adipisci id ad quidem atque omnis amet! Eos, eligendi.</p>
<p>Nam culpa quo incidunt quaerat iure itaque, porro hic aperiam ducimus? Vel tempora unde nulla quisquam nisi facere expedita deserunt.</p>
<p>Sunt, minus tempore dignissimos pariatur eos modi at minima culpa nisi debitis ipsam nihil recusandae illum unde magni hic sint!</p>
<p>Veritatis minima excepturi nisi! Ex consectetur, asperiores iste laudantium voluptatem enim, possimus quae porro modi corporis pariatur, non est ratione!</p>
<p>Est consequatur amet dignissimos quibusdam veniam? Commodi qui voluptatum facilis hic? Quasi itaque illo facilis reiciendis, soluta sit maxime delectus?</p>
<p>Explicabo eos neque dolore similique illo illum soluta nulla eveniet! Facilis et ipsa quia asperiores vitae, dignissimos adipisci necessitatibus sed.</p>
<p>Corporis cumque est, nihil omnis possimus consequatur recusandae magnam quod, officia aut odio dolores distinctio nostrum et vitae, consequuntur provident?</p>
<p>Ipsam, quisquam ea magnam autem possimus, rem tempore doloribus, in amet ullam debitis facilis tenetur voluptas labore. Aperiam, quam libero?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, accusantium.</p>
<p>Numquam ea sint debitis voluptatem fuga tempore repudiandae architecto minima.</p>
<p>Quidem explicabo consequatur obcaecati quia nisi quisquam! Eligendi, vero dolor.</p>
<p>Eum cumque perspiciatis praesentium quae provident nobis, excepturi inventore culpa?</p>
<p>Veniam doloremque cupiditate repellat totam, dignissimos unde eaque mollitia a.</p>
<p>Dignissimos consequatur voluptatibus provident velit! Ea voluptas quia iste saepe?</p>
<p>Saepe, fugit cupiditate possimus enim veritatis repudiandae molestias accusamus iure?</p>
<p>Illo unde obcaecati repellendus tenetur, quam doloremque commodi voluptas sit?</p>
<p>Quibusdam velit enim totam amet quasi aperiam repudiandae beatae quia.</p>
<p>Corrupti repellat deleniti aliquid exercitationem! Magni repellendus ipsum quas minus.</p>
<p>Dolor nesciunt ducimus corporis illo dolores deleniti asperiores numquam inventore?</p>
<p>Ratione omnis cum labore consectetur sequi quam, facere qui rem.</p>
<p>Ratione nostrum quia ex quod debitis distinctio iure eligendi eum!</p>
<p>Sunt repudiandae omnis accusantium quidem ipsam corrupti ipsa at vel!</p>
<p>A quasi fugit animi ullam. Dolor dolore incidunt libero velit.</p>
<p>Optio ducimus officia dolor quis, consectetur numquam blanditiis asperiores magnam?</p>
<p>Porro aspernatur suscipit officiis veritatis a quo, earum eos sapiente!</p>
<p>Magnam hic veritatis at. Iste tempora fugit quaerat deserunt qui?</p>
<p>Temporibus excepturi iste harum recusandae aliquid omnis corporis rem iure.</p>
<p>Fugit aut placeat facere suscipit. Magni amet sunt omnis quisquam?</p>
</div>
</div>
<div class="modal-backdrop"></div>
</div>
</div>
<h1>Scroll and modal</h1>
<p>Some scrolling content</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam delectus excepturi, fuga adipisci, deserunt culpa recusandae doloremque debitis non doloribus magnam reprehenderit maxime aut quaerat quam possimus fugit, voluptatem ab beatae reiciendis aperiam error. Explicabo quas necessitatibus cum enim vitae! Dicta maxime ea nam iusto ab reprehenderit placeat blanditiis numquam quam voluptates itaque, commodi aliquid deleniti natus dolorum unde sint. In quasi incidunt iure, repudiandae reiciendis inventore voluptatem modi facilis tempora maxime atque reprehenderit minus dolores neque exercitationem? Quisquam animi alias laudantium esse dicta molestiae ullam ipsum delectus culpa nemo nobis deserunt id, dolore minus. Perferendis ratione libero voluptate tempore fugiat modi, excepturi labore unde soluta ipsa asperiores molestias, corporis sapiente voluptatem distinctio nobis architecto. Ut facere sapiente ipsam inventore tempore architecto tempora officiis, laboriosam natus ea itaque consequatur. Error eum repellendus, perferendis deleniti qui quam voluptatem sint in sapiente eaque illo facilis minus ducimus ex officiis laudantium officia soluta suscipit debitis, recusandae eligendi, unde consectetur facere quasi. Neque corrupti asperiores deserunt eos corporis minima ex. Et a fuga in porro aspernatur quis veniam, repudiandae voluptatum eligendi cumque delectus, iusto voluptatem fugit maiores molestiae vel dolore impedit error. Vitae illo doloremque error totam id et veritatis earum eligendi placeat iste!</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Magni illo animi maxime deleniti dolorem a, reprehenderit aut hic iure! Ipsam, eaque voluptates? Voluptates, cum porro. Rerum deserunt iste labore mollitia expedita doloribus reprehenderit eos quae ducimus debitis fugiat quasi molestias in illum accusamus quisquam ipsum dicta eius nemo modi, adipisci unde incidunt! Repellendus ad nihil fuga tempora nobis? Magni omnis, ea alias pariatur eligendi doloribus, adipisci laborum possimus maxime provident esse! Ullam similique ducimus quod unde culpa ipsa illum nisi aut aspernatur consequuntur assumenda neque nihil quam ipsum, eius suscipit eligendi. Optio est, illo aut reiciendis alias corporis! Dolorum omnis facilis similique labore ab laboriosam repudiandae magnam voluptatibus, iusto praesentium! Illum laudantium consectetur molestiae nulla voluptatibus consequuntur? Quas natus iure harum praesentium deleniti rem fuga quidem, sit sequi. Quod consequatur voluptatibus quas unde officia laborum expedita quaerat vero, facilis, nemo excepturi nobis iure repellat explicabo eius atque accusamus ex tempore. Cumque aliquam mollitia, provident iste quasi maxime, quod voluptatum fugit at accusantium vitae. Aperiam soluta nobis iusto incidunt non aspernatur nihil cumque eum vero commodi animi in, quasi deleniti doloremque earum reprehenderit officiis praesentium. Totam illum quod dolorum sequi placeat temporibus odit quis, doloribus ratione repellendus? Itaque et fuga illo cumque aliquam voluptatem magni laudantium fugiat nemo obcaecati.</p>
<p>Est iure, laboriosam sint quibusdam corrupti magni a minus repudiandae, incidunt autem consequuntur dolorem cumque eaque, nulla facere illum veritatis. Voluptatibus rerum fugiat iusto hic animi distinctio. Officiis, atque. Laboriosam excepturi iure quaerat exercitationem architecto optio laudantium, id amet dolores fugit ullam harum itaque nesciunt, at enim neque quam consectetur eveniet! Libero ex quos pariatur quaerat esse quas dolore praesentium in ipsam ab aut at expedita nam a soluta consequatur ducimus iusto rem voluptate laborum, dolorum quod veniam? Nihil accusamus quis ratione nemo beatae provident sequi ea ipsam quia explicabo quasi molestias voluptatum eius nostrum, modi sunt voluptate! Perspiciatis vitae voluptatibus quos ea optio perferendis minus repellendus a, ut tempora maiores beatae! Tempora impedit nesciunt ab dolore odit ipsa quia soluta illum! Explicabo dolorem molestiae fuga blanditiis, fugit commodi vitae ab non! Itaque veniam facere pariatur eius saepe ipsam incidunt numquam deleniti similique tempora? Doloribus natus architecto nulla vitae ullam ipsam fugiat maiores officia deleniti a, iure asperiores esse velit alias culpa? Nisi obcaecati, iste sequi officiis aliquam aut commodi vitae consequatur ea molestias sint eligendi ut dolore eveniet consectetur laborum quos natus cum quia molestiae explicabo id. A excepturi cumque porro vero nulla voluptate harum atque animi deleniti voluptas?</p>
<p>Ipsa esse dolor, dicta quis quod hic fugit quaerat repudiandae nobis cum voluptatem expedita amet tempora sed atque repellendus, cumque consequuntur iste adipisci quae aliquam ex sapiente corrupti? Quia numquam obcaecati nesciunt. Nisi quis cupiditate obcaecati at, nesciunt quae ipsum repellendus distinctio facilis ut architecto repellat explicabo impedit hic ex recusandae cum excepturi quisquam beatae sint fugiat, laboriosam blanditiis ratione. Veritatis accusamus quis totam et dignissimos, deserunt cumque quisquam amet eveniet ratione error autem ipsa maxime ducimus, voluptate, architecto nemo incidunt molestiae id. Saepe necessitatibus ipsam ad atque ullam quisquam maxime, soluta nemo voluptates corrupti mollitia praesentium, aliquam rem facilis ipsum deserunt perspiciatis autem animi quia commodi possimus! Consequuntur in nam sit hic temporibus aliquam. Amet alias, nobis exercitationem, veritatis nesciunt sit necessitatibus doloremque fugiat ullam rerum quia libero. Iste quaerat, totam labore qui provident eum sunt dolorem fugit facere dolorum quasi rem! Iste velit obcaecati aliquam maxime totam animi, harum labore vitae quos voluptates culpa earum quo, quibusdam explicabo eius nesciunt assumenda nulla natus, quae non ut dolorum nemo hic! Neque blanditiis molestiae esse ad laudantium, cum nostrum non alias nihil! Neque nostrum quam iste commodi consequatur obcaecati quibusdam ipsa corporis ut exercitationem rerum minima, facere aspernatur praesentium vitae.</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Necessitatibus, deserunt vero aut reiciendis omnis adipisci in aspernatur officia exercitationem, fuga perferendis alias maxime eum odio! Officia, exercitationem? Magnam cum sequi at totam distinctio libero animi non doloribus odio quisquam commodi quaerat, culpa cupiditate voluptatum impedit sapiente reprehenderit odit aspernatur. Quasi mollitia saepe commodi tempora inventore adipisci voluptatem eius et aperiam nemo maiores ipsam corrupti, impedit numquam repudiandae illo voluptate! Error nihil repellendus numquam similique cum in assumenda eligendi accusantium, saepe, consequuntur repudiandae neque fugiat aperiam delectus vero eum atque! Hic nostrum deleniti quos rem velit ad pariatur sit recusandae distinctio corrupti, et fugiat. Beatae nobis obcaecati esse fugit at culpa consectetur, accusamus suscipit necessitatibus, maxime pariatur ipsa? Suscipit quaerat pariatur accusamus debitis vitae neque eos odio, quod qui ad, explicabo quae rem necessitatibus sunt corrupti deserunt minima voluptatem laudantium obcaecati illum aliquid velit doloremque molestias? Hic fuga debitis explicabo neque quaerat ratione est totam cumque eius tempore necessitatibus at eos, sequi veritatis perferendis numquam ducimus sit nisi iusto doloribus. Dolor a doloremque maiores ipsum expedita? Deleniti deserunt delectus iste iusto aspernatur quo, dolorem ipsum, modi nulla, accusamus quam a eius natus nisi id in neque explicabo nesciunt at harum labore eaque ratione molestias! Officiis delectus facere error tenetur?</p>
<p>Magni possimus necessitatibus voluptate nobis voluptatibus minima odio atque at neque similique natus, totam obcaecati harum qui? Vero molestiae laborum accusantium reprehenderit consectetur, nobis veniam ea praesentium vel soluta hic, dolore assumenda, accusamus fugit voluptatum totam delectus ut minima at autem nam dignissimos illum veritatis explicabo? Explicabo harum animi commodi adipisci ab totam expedita. Cum atque maiores perspiciatis. Similique eos commodi, rem, tenetur placeat reprehenderit unde fugit, qui at sed corrupti! Sapiente, minus sint possimus itaque facere, voluptate illo officiis nesciunt accusantium recusandae maxime blanditiis doloribus. Odit asperiores quis illo quasi obcaecati ipsa, commodi beatae labore voluptates, vel quo neque, enim reprehenderit iste rerum debitis quisquam! Esse, maiores atque! Maxime eligendi eaque delectus eum, aut necessitatibus ad? A, accusamus! Quos, harum pariatur nostrum delectus dolores corrupti, repellendus vel blanditiis rem laboriosam laudantium quam perspiciatis incidunt dignissimos voluptatibus, minus voluptas ducimus fugit veritatis similique. Repudiandae possimus autem quod! Repudiandae eos perferendis libero nihil, dolores harum. Dolorum eos eligendi sequi odit at molestias mollitia libero nemo illum, excepturi, in temporibus, necessitatibus velit officia nam quidem laudantium dolore delectus non aliquam. Hic libero earum consequatur maiores nesciunt sequi, atque reprehenderit ipsa quos odit unde aperiam omnis, vitae quod, laborum accusantium perspiciatis dolorum ratione?</p>
<p>Sunt dolore ratione excepturi tempore voluptatum voluptas consequatur reiciendis, harum eaque mollitia beatae natus dolorem dolorum atque at consequuntur quaerat. Mollitia, iusto dicta. Nulla ea dolores similique aliquid possimus, pariatur a saepe iusto aut veritatis voluptatibus assumenda animi nam nobis esse tempore, asperiores numquam maiores. Consequuntur saepe fugiat ipsum excepturi, non corporis eum aut dignissimos. Consequatur nesciunt laborum earum consectetur reprehenderit voluptate molestias quidem, deleniti quae tempore sequi. Tempora architecto a accusantium odio voluptates aliquam autem suscipit provident sit asperiores incidunt illum ducimus facilis, molestias, inventore mollitia! Atque provident odio soluta deserunt quisquam tenetur quae molestias magnam ex, sed culpa nulla fuga corporis vero maxime quidem mollitia facere. Illo et non perspiciatis consequatur nobis temporibus eveniet nulla aut quae animi facilis veritatis minus, recusandae fugiat odit atque! Natus beatae velit possimus repellendus, perspiciatis vero culpa voluptatem quia atque quos doloribus nostrum fuga cum ea. Accusamus officia numquam praesentium sapiente! Tenetur sed harum itaque maxime ea velit, dolor doloremque soluta natus libero tempore similique adipisci optio dolorem aut accusamus in ut vel quaerat, inventore veniam quis. Explicabo, ipsum temporibus saepe ad, libero consectetur adipisci amet quaerat placeat rem sit dolore fugiat cupiditate porro quod commodi expedita totam veniam. Reiciendis, consequuntur nostrum!</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Voluptas odit dicta laudantium temporibus unde nesciunt repellendus asperiores incidunt consectetur! Accusantium quis dolorum eveniet quos atque voluptas amet! Iure quo nam alias, veniam hic totam quia voluptates dolorem quibusdam eum fuga enim sunt laudantium velit, ducimus doloremque omnis quae delectus explicabo quis sed. Voluptate, eius fugiat odio minima sapiente ut illo error molestiae, repellat exercitationem nesciunt sit iste earum provident reprehenderit? A, distinctio. Cupiditate magni eius eligendi atque et rerum dicta illo sequi voluptates esse dolores, ducimus corporis laudantium in eos accusantium temporibus delectus vel quidem dolor repudiandae numquam libero officiis non? Commodi nostrum doloribus officiis hic doloremque, corporis rerum harum dolore eum quia voluptatibus inventore at sapiente consequatur laudantium quos quaerat vero? Voluptates modi ut totam aliquid laudantium consequuntur beatae odio tempore iusto officiis exercitationem, animi quos, dignissimos voluptatibus quas ad eaque. Nam, repellendus numquam veniam excepturi inventore iusto non accusantium eaque corporis laboriosam ipsa at modi recusandae atque perspiciatis. Ab doloribus animi unde eaque cumque esse, sint qui suscipit earum magni provident labore, velit, ipsam inventore veniam reiciendis officia voluptas sequi quisquam impedit? Ut laborum magnam a iusto? Assumenda quidem expedita laudantium vero! Quos soluta, magni nemo ipsa ratione incidunt eius nihil facilis? Rerum corporis iure eligendi.</p>
<p>Inventore obcaecati reprehenderit, corporis repellendus, possimus velit vel alias, id voluptate eaque voluptatem numquam eveniet nostrum? Ab vel, illo consectetur quas beatae repudiandae error vero quam dolorum quasi velit aut iure! Totam nemo perferendis velit quidem adipisci reprehenderit molestias optio pariatur doloremque reiciendis repellat repellendus blanditiis error a ratione laudantium nobis aliquam, dolorem numquam porro sapiente. Amet inventore corporis suscipit natus est sunt, laborum excepturi rerum, quasi sequi commodi placeat officiis nobis. Voluptate, error odit! Blanditiis laborum, nihil quo quas reprehenderit aspernatur cupiditate explicabo! Sint magnam nesciunt eligendi nostrum cumque, dolor saepe est quidem nihil consectetur, laborum soluta, accusamus doloremque. Rerum modi sapiente aliquam dolore itaque, voluptatibus tempore atque consequuntur maxime omnis recusandae quo quaerat laborum aspernatur possimus dolorem earum adipisci, non, excepturi quia! Iusto et repellendus inventore eligendi magnam, quae beatae numquam aliquam animi incidunt officia similique qui cumque. Fugit est deserunt rerum, assumenda eligendi, voluptatibus corporis sed qui minus doloribus officia esse sit sint earum veniam. Magnam ipsum ipsam aliquam doloribus magni a perspiciatis qui beatae blanditiis dolorum, aliquid nemo impedit omnis numquam expedita mollitia, quos assumenda necessitatibus quas. Ipsam rem voluptas delectus ipsa ratione! Optio, distinctio dicta. Unde id harum dolorem sed velit, impedit distinctio dignissimos error.</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Laborum exercitationem quas ex! Nostrum quaerat eaque itaque repudiandae expedita dolores sapiente quia non hic obcaecati, tempora error quo facilis ut quas adipisci voluptatum voluptate, qui temporibus! Eveniet corporis molestiae sapiente, omnis nostrum quod consectetur at error velit aspernatur vero non illum quidem voluptates laboriosam molestias! Porro nobis, soluta cum laboriosam dolore delectus amet reprehenderit adipisci! Quis enim praesentium officiis voluptatum quasi, totam corporis vero sit, laboriosam beatae, nam ab! Molestias id amet impedit maxime cupiditate iure officiis, ad ipsum ipsam excepturi corrupti praesentium velit repellendus quo facilis? Officia recusandae nobis nemo fugiat iste id explicabo asperiores non quis rerum tempora repellendus necessitatibus error unde quam ea ratione autem quaerat est hic quia deserunt, doloremque aspernatur. Quos inventore enim perspiciatis illum voluptatibus officia voluptas molestiae eveniet consectetur eos voluptatem, tempore necessitatibus eius mollitia reiciendis aut ullam aspernatur aliquid nihil expedita nisi accusantium sunt quam dolorum. Natus sit sequi itaque ut, ex, maiores aspernatur magni nostrum ad ratione assumenda qui hic? Similique molestiae aperiam quae laudantium pariatur quibusdam, quidem provident ducimus, modi blanditiis sed? Recusandae, iure? Nihil laborum rerum adipisci tenetur aspernatur quas asperiores. Deserunt amet, veniam doloremque pariatur nisi et quis commodi voluptates error cumque modi inventore optio, tempore fugiat.</p>
<p>Totam, quod et tenetur officiis consequuntur laboriosam provident dicta unde placeat, expedita ad sit voluptas molestiae ipsam voluptatibus omnis, magni id sunt esse modi distinctio exercitationem? Saepe unde repudiandae enim dolor explicabo possimus vel quisquam cumque. Minus dolorem vitae, qui at facilis dicta tenetur quos aut corrupti nisi doloremque asperiores ab sint hic, laudantium eveniet. Alias iste tempora obcaecati dignissimos delectus nesciunt tenetur mollitia eum architecto officiis quas odit, quo magni, beatae accusamus asperiores eius facere, corrupti provident earum dicta laboriosam blanditiis esse libero! Aspernatur omnis iste sit, magni facere possimus ea provident officiis rerum ducimus similique natus neque suscipit incidunt repellat perspiciatis, itaque iure. Pariatur nesciunt libero rerum inventore? Nobis aperiam, nostrum odio facilis id animi atque provident hic dolorem quas fugit earum velit ratione qui ipsam repellendus ut sit omnis facere libero ex neque? Provident error ducimus modi magnam fuga, ex eveniet omnis earum sed magni at asperiores harum, veniam quidem perferendis. Dicta ab voluptates ipsum quas expedita eligendi voluptate praesentium, consequuntur harum qui eum veniam maiores in molestiae aliquid, totam quod officiis asperiores ex necessitatibus. Saepe porro unde dicta beatae consectetur provident quidem suscipit, sed laborum sit, doloribus expedita mollitia aliquam adipisci necessitatibus pariatur veniam laudantium sequi?</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Aperiam, fugit ipsam. Minus quaerat nesciunt eum iure architecto, exercitationem laudantium corporis quos quam odio repellendus, accusamus qui dolor vitae numquam suscipit debitis, amet eaque perferendis quasi doloremque. Sit sapiente nihil corporis mollitia placeat tenetur eius fuga quisquam quam, dignissimos, possimus aspernatur. Praesentium magnam obcaecati, vitae deserunt inventore dolorem aspernatur impedit laboriosam quae deleniti nesciunt, animi amet totam est eum delectus incidunt id quisquam sapiente labore sint ad ipsa dignissimos. Officia ipsum quis minus sapiente corrupti quasi eius iste unde distinctio ducimus voluptatum vitae perferendis, iusto cupiditate optio laborum veniam ex dolorum, dolores omnis! Repellat perspiciatis quidem, molestiae reprehenderit a aliquam, modi obcaecati voluptatum, iste expedita itaque non. Error atque fugiat sunt ab. Ullam, ipsam id! Sunt fugit maxime incidunt illum reprehenderit deserunt qui iste quisquam natus labore eveniet ut porro ab eos commodi consequuntur eum delectus quaerat, molestias, architecto obcaecati. Unde aliquam exercitationem numquam corrupti recusandae autem ratione animi voluptas. Laborum adipisci aperiam consequuntur dolorum dolor aspernatur rerum cum impedit harum vel, animi quaerat, magnam consectetur optio sunt assumenda! Eius tenetur nam fugiat voluptatibus dignissimos ipsum, aperiam sint delectus ab, reiciendis in voluptatem tempore optio. Numquam mollitia quis vero sequi, nisi tempore fuga ducimus doloremque a nostrum, praesentium id.</p>
<p>Consequatur, velit, fuga harum nam quod commodi esse tempora laboriosam exercitationem reiciendis veniam, fugit expedita. Vitae, doloremque? Ex similique saepe perferendis iste autem veniam aliquid, harum minus? Molestias nobis eaque inventore saepe similique et vero autem eveniet repellendus. Excepturi magnam dignissimos, consectetur unde in expedita praesentium possimus consequuntur quaerat corporis beatae nobis minus. Molestias, harum ut! Dolores distinctio, quo placeat nam obcaecati cupiditate voluptatem nemo? A suscipit placeat quas iusto impedit. Libero ipsam excepturi ipsum quam, animi laboriosam sapiente nostrum necessitatibus quas ea pariatur error explicabo quos consectetur ullam nihil odit? Voluptatem animi repellat rem inventore, repudiandae saepe laborum culpa nihil deleniti corporis. Nostrum reprehenderit recusandae consectetur, quaerat autem natus vitae. Soluta nemo quisquam adipisci cupiditate similique architecto, quam ab corporis harum suscipit quo est, iusto quod earum modi necessitatibus, asperiores ratione sunt animi voluptatum? Eveniet, adipisci illo nemo pariatur ut nisi impedit sint debitis reiciendis nihil, illum dicta cupiditate quo quidem, est laborum minima fugit. Autem fuga eligendi necessitatibus obcaecati temporibus aspernatur, ullam deserunt illum nulla voluptatum mollitia, suscipit odio, placeat molestias. Ullam harum aliquid, voluptate est nam commodi tenetur ut repellat vel quaerat. Sed cupiditate voluptatibus eveniet non aspernatur consequuntur pariatur molestiae magnam, quis, dolorem nemo aperiam impedit.</p><button data-modal-trigger="#my-modal">Click for modal</button>
I have a demo here:
https://codepen.io/EightArmsHQ/live/351dcdcc863e14419121099f647998c3
In all modern browsers, there is a red button in the sidebar after all the list items
This is done by something along these lines:
<div class="menu">
<ul />
<button />
</div>
And then the following CSS:
.menu{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
The problem is in older versions of firefox, these lines:
height: 100%;
justify-content: space-between;
Put the button a sort of "position: absolute; bottom: 0" style of positioning.
Does anyone know of any firefox workarounds for this sort of issue? The last 36 versions of the browser work well 😂
Stack snippet
document.querySelector("#toggle").addEventListener('click', function(){
document.body.classList.toggle("toggle");
});
main {
width: 600px;
margin: 0 auto;
}
.menu {
position: fixed;
left: 0;
top: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-y: scroll;
background: #fafafa;
}
.menu li {
padding: 40px 0;
}
.menu .example-a {
display: none;
}
.menu .example-b {
display: block;
}
.toggle .menu .example-a {
display: block;
}
.toggle .menu .example-b {
display: none;
}
button {
background: red;
padding: 20px;
}
<div class="menu">
<ul class="example-a">
<li>Ipsa.</li>
<li>Non.</li>
</ul>
<ul class="example-b">
<li>Beatae.</li>
<li>Consequatur.</li>
<li>At!</li>
<li>Nam.</li>
<li>Quidem.</li>
<li>Accusamus!</li>
<li>Ipsum.</li>
<li>Cumque.</li>
<li>Recusandae.</li>
<li>Veniam.</li>
<li>Omnis?</li>
<li>Vitae?</li>
<li>Ut.</li>
<li>Alias.</li>
</ul>
<button>Action</button>
</div>
<main>
<button id="toggle">Toggle demo</button>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis voluptatum facere minus sit hic ipsum eligendi officiis reprehenderit recusandae tenetur quaerat, provident exercitationem ex impedit beatae commodi voluptate quia sequi.</p>
<p>Tenetur sapiente minima quia labore repudiandae est, facilis laborum voluptas? Ut sequi earum, magni natus ad a doloremque non, quam sint molestiae consequatur consectetur unde. Nihil nemo voluptatem reiciendis repudiandae?</p>
<p>Laboriosam esse eius, dignissimos quasi asperiores ea doloribus, eligendi velit, deserunt eum repellendus. Sit et illum voluptatum. Inventore doloremque atque laudantium, esse id dolore itaque placeat quasi veritatis, quae sequi?</p>
<p>Ea architecto voluptate id blanditiis beatae quas dolore amet mollitia maiores error deserunt nulla enim natus dicta, sint accusamus minus quis quam! Dignissimos officia blanditiis dicta nulla consequuntur eum error?</p>
<p>Reiciendis voluptates quae adipisci perferendis ullam molestiae, sint corporis laudantium vitae alias blanditiis iure voluptatum voluptas autem? Alias iste numquam porro voluptatem provident pariatur possimus sequi dignissimos. Fuga, molestias ex?</p>
<p>Consectetur non laborum mollitia optio accusantium, ratione provident voluptas exercitationem soluta quam totam harum quaerat vel fugiat modi minima ab fuga. Dolore velit deserunt numquam nostrum in vero impedit. Maiores.</p>
<p>Saepe consequuntur dignissimos, maxime distinctio est commodi aspernatur, inventore dolorem ducimus, cumque odio nisi reprehenderit animi? Earum alias maiores, adipisci quis enim iure? Dolorum explicabo ipsa accusamus, vero corporis earum?</p>
<p>Eos aperiam nisi debitis accusantium suscipit soluta dolorum fuga quas? Nesciunt a nisi alias officia saepe esse excepturi tenetur accusamus minus autem, earum corporis impedit ipsum veniam voluptates magni aperiam!</p>
<p>Vero ipsum ab repellat dolores rem odit quis aperiam dolore, esse dolorum eveniet dicta, quo aliquam numquam quam voluptates. Officia deserunt quisquam dicta voluptatibus molestias, nulla tempora sit voluptates vitae!</p>
<p>Sint a eligendi magnam, voluptatum accusamus adipisci enim consequatur labore pariatur, id nostrum omnis maxime quae ipsam fugiat fugit? Rerum in repellendus libero porro veritatis nam odio consequatur et nobis!</p>
<p>Dolorum vero tempore aspernatur, quos saepe minus ratione, officiis eveniet numquam quibusdam maxime obcaecati facilis similique? Nesciunt maxime officiis voluptatem amet dignissimos illum quos maiores, veniam consequuntur quisquam doloribus delectus!</p>
<p>Alias voluptate id optio, illo aperiam libero cum repudiandae impedit porro officiis iste enim officia! Reprehenderit quidem qui nobis, sed, reiciendis repudiandae rerum, consequuntur doloribus consequatur eos id molestias officiis?</p>
<p>At vel quo beatae laborum eius, quaerat distinctio eveniet eaque veritatis, doloremque quae minus illo numquam harum labore suscipit quasi fuga quas quisquam saepe. Quisquam id excepturi quae veniam officia.</p>
<p>Ex rem animi voluptatibus. Sunt maxime impedit quae neque nesciunt reprehenderit inventore obcaecati eaque corrupti, labore distinctio consectetur quod? Voluptate, error. Aut hic eos dolor praesentium modi porro non temporibus?</p>
<p>Ipsa accusantium, quod aliquid esse est velit tempora nam rerum sequi magni minima assumenda asperiores dolorem dolorum dolore molestiae corrupti nemo nulla quos beatae expedita vel laudantium numquam! Ipsum, recusandae.</p>
<p>Architecto ipsam quia laborum repudiandae a similique ducimus vitae explicabo excepturi ut quos repellendus velit iure, quis quo, eligendi illo pariatur mollitia. Iusto aperiam quibusdam quae libero natus quasi repellendus.</p>
<p>Distinctio consequatur nihil voluptatum itaque esse dolore neque eum voluptate, laborum officiis veritatis reiciendis eos! Tempore perferendis excepturi ratione culpa repellat quae eaque. Officia rem, suscipit aut sunt assumenda repellat!</p>
<p>Modi, vitae veritatis officiis perferendis cupiditate itaque labore, maiores fugit tenetur deserunt ipsam, consectetur fuga delectus nisi reprehenderit! Aut error eligendi assumenda modi rem necessitatibus praesentium vel, quos tenetur recusandae?</p>
<p>Perspiciatis iure nihil velit repellat, voluptas similique nesciunt aliquam itaque possimus facere, dolorem et dolor repellendus impedit. Quia voluptatum, nesciunt itaque recusandae esse provident temporibus quos. Deleniti architecto fugit magnam.</p>
<p>Voluptates, fugit culpa est commodi, unde suscipit porro officia ut obcaecati possimus exercitationem assumenda beatae aut, rerum non velit repellat odit earum nihil! Mollitia pariatur beatae tenetur aliquam optio provident?</p>
<p>Ipsum velit atque debitis magnam, natus recusandae cumque, assumenda harum in eaque nisi eos sint, quidem corrupti! Quos officiis ipsa quasi neque sed commodi repellendus, adipisci ut minus? Repellat, qui.</p>
<p>Rem labore voluptatibus maiores molestiae, harum repudiandae est, deleniti, numquam odit ut nesciunt adipisci? Ea, accusamus quaerat! Quam doloribus, error sapiente enim voluptatem laborum architecto consequatur a maiores harum asperiores!</p>
<p>Blanditiis explicabo tempora saepe consequuntur sunt eligendi nobis. Impedit debitis autem ea animi, recusandae in quia inventore, veniam, velit cumque vero aut? Earum adipisci omnis temporibus consequatur natus, accusantium rem!</p>
<p>Totam, hic velit quaerat incidunt fugiat corrupti soluta culpa earum est excepturi inventore obcaecati omnis vero at veniam nisi vitae, atque similique ullam nemo molestias nesciunt sint. Temporibus, aperiam earum.</p>
<p>Voluptates molestias architecto est nesciunt amet commodi similique omnis. Soluta hic corrupti dignissimos. Sed officiis aliquam fugit, libero odio maiores alias recusandae deserunt incidunt, saepe reiciendis modi voluptatem praesentium id!</p>
<p>Impedit porro velit illo tempore veniam saepe, ea nesciunt deserunt repellendus accusantium aliquam quam dolor quisquam voluptas quis. Eaque iusto provident ipsum officia odio maxime dolorum expedita ducimus tempore molestiae?</p>
<p>Culpa fugit autem aspernatur, assumenda ex ut rem repellendus vero consequatur laboriosam labore dolorem. Quia voluptas est commodi sit sequi veniam nobis nam, nisi soluta ducimus reiciendis, voluptatibus earum praesentium!</p>
<p>Eaque amet ab porro provident laudantium alias, deserunt consequatur error optio nihil incidunt repudiandae mollitia, laboriosam, sunt voluptatum eos magnam odit molestias. Quia eveniet facilis inventore, eum ipsam dolorum officia!</p>
<p>Beatae possimus fugit saepe! Saepe, porro quisquam. Nemo molestias assumenda aut, ullam deserunt cumque porro architecto harum. Nam soluta, repellat voluptatem nihil minima nemo tempore perspiciatis, beatae deleniti, a deserunt?</p>
<p>Eveniet nesciunt eaque quis eum? Non facere voluptatem eveniet adipisci labore sit, impedit dolor iusto odio totam beatae tenetur possimus assumenda porro sint ab debitis maxime quasi. Sapiente, tenetur asperiores?</p>
<p>Voluptatem quidem illum atque ipsam tenetur voluptas. Voluptate debitis sunt numquam? Similique aliquam, illo porro ab doloribus tempora, distinctio error officia quidem, culpa in dolores consequatur neque reiciendis quia soluta.</p>
<p>Laboriosam consequuntur nihil inventore repudiandae cumque eum animi beatae quibusdam, exercitationem perferendis harum reprehenderit, iusto nemo! Ipsum ad at assumenda nisi sapiente eos aut reiciendis, eum est? Ducimus, numquam odit?</p>
<p>Corporis nihil eligendi nam doloribus sed explicabo minima, expedita optio omnis aliquam. Nulla autem harum cum odio quam quas aperiam quae, deleniti ea assumenda. Porro et sed dicta quos nihil.</p>
<p>Perferendis minima quasi debitis! Deleniti aut consequuntur ratione modi sit, sapiente itaque doloremque fuga, expedita atque consectetur nulla error illo rerum ullam iste fugiat dolorum blanditiis architecto magni. Provident, magnam.</p>
<p>Facere itaque ipsa laboriosam, vero explicabo illum optio consectetur quas et harum quis hic ullam nihil debitis sit veritatis delectus, nam ducimus adipisci, excepturi fugiat! Optio eius alias non explicabo.</p>
<p>Consequuntur voluptatibus, temporibus sint rem error voluptatem nisi totam harum perspiciatis. Quis rerum vero aperiam ea? Cumque iure non animi reiciendis dolorem quia vitae, aspernatur magnam asperiores optio distinctio necessitatibus.</p>
<p>Obcaecati placeat nihil doloribus eligendi in nobis porro. Nesciunt, dolorem veniam perferendis laboriosam tempore sequi pariatur provident quis voluptatibus officia suscipit nostrum rem quos, unde animi nulla minus ullam aliquid.</p>
<p>Dolorem asperiores earum nobis repellat laboriosam hic nihil, rem eveniet harum dicta ullam amet modi laudantium! Nemo inventore, quis praesentium ipsa saepe eveniet non recusandae dolorum? Doloribus voluptatum optio veniam.</p>
<p>Similique vero laborum in dolor, at dolores. Suscipit quidem aut consequuntur? Deserunt modi aliquid quisquam in iure eaque fugiat ipsam unde, laborum magni optio, amet illum labore neque natus maxime.</p>
<p>Voluptatem et dolorum vero quo cupiditate deserunt atque suscipit sit nobis qui saepe reiciendis dicta, dignissimos harum, nostrum ipsam! Sed rem corporis maiores labore porro accusamus, atque aspernatur libero magnam!</p>
<p>Veritatis, non? Libero, reiciendis asperiores! Amet placeat at, quo quis molestiae et, odio odit molestias excepturi modi explicabo perspiciatis itaque numquam eius doloremque in repellat eveniet temporibus qui dolor totam.</p>
<p>Ducimus, accusantium doloremque error deserunt recusandae doloribus ut delectus veritatis libero illo? Molestiae, recusandae dolore ut enim veniam, totam omnis explicabo, ducimus provident beatae odit atque expedita dignissimos optio animi.</p>
<p>Corporis quidem quas odit blanditiis possimus dicta in, ad consectetur accusantium est facere vitae distinctio obcaecati quasi praesentium officiis quaerat debitis sint error cum laudantium nesciunt nisi. Cupiditate, officia a.</p>
<p>Hic ratione pariatur magni veniam optio, repellendus, adipisci soluta perferendis beatae eligendi numquam, facere eum inventore aperiam. At officiis ad facere officia corporis id reprehenderit, sapiente illum aperiam obcaecati nam!</p>
<p>Neque consequuntur, error nisi earum tempore cupiditate illum eligendi vel ducimus accusamus cumque optio, magnam sint voluptas? Perferendis provident sunt aperiam repellendus at placeat nesciunt repudiandae nostrum, laudantium officiis architecto!</p>
<p>Commodi aut soluta ducimus repudiandae aliquam ipsa. Laboriosam, asperiores? Possimus, ut, ratione alias necessitatibus dolorem, quas nostrum dolor architecto voluptas reiciendis eveniet natus suscipit ipsa labore odit nemo repellat. Maxime.</p>
<p>Rem dolore explicabo optio vitae repudiandae nam non similique quisquam dolorum inventore est iure ut architecto, voluptatum minima sapiente nesciunt nobis, atque ratione, incidunt exercitationem? Numquam omnis consequatur at architecto.</p>
<p>Perferendis ipsam, magnam maxime eligendi aliquam quae qui illo magni rerum, sequi unde fuga natus vero a numquam tenetur nisi distinctio ad ab quidem. Fugit ut earum natus magni in.</p>
<p>Optio nihil, beatae veniam cupiditate id facere delectus earum at, magnam, voluptatibus veritatis aliquid excepturi aperiam repudiandae esse tempora animi obcaecati! In fuga rem quisquam iste beatae odio magni sit!</p>
<p>Quaerat sequi ea distinctio voluptas odio excepturi ducimus aspernatur, itaque possimus, molestias ut voluptatum quam earum in aperiam blanditiis assumenda voluptatibus tenetur, doloremque pariatur illo inventore esse laborum vel! Esse.</p>
</main>
I specially download Firefox V.33 and find solution, Below is my code.
But i must say please update your browser, the latest version is 70 approx so, i hope you understand.
Here we go.
Create a div inside main class and give css it:--
display: flex;
flex-direction: column; justify-content: space-between; min-height:
100%;
You can put my code and check in your browser and do let me know it's help or not.
HTML
<div class="menu">
<div class="outer" style="display: flex; flex-direction: column; justify-content: space-between; min-height: 100%;">
<ul class="example-a">
<li>Lorem.</li>
<li>Rerum.</li>
</ul>
</div>
</div>
CSS
.menu {
position: fixed;
left: 0px;
top: 0px;
overflow-y: scroll;
height: 100vh;
}
.outer {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
}
i want to display dropdown menu upon clicking a button. But the dropdown menu is displayed not close to the button clicked and remains fixed when scrolling page vertically. Below is the code
<div>
<div onClick={this.handle_click}>
{toggle}
</div>
{this.movie_list.opened &&
<div className="dropdown_contents">
{React.Children.map(
contents,
(child, index) => { return (
child && <div
key={index}
className="dropdown_item"
onClick={this.handle_item_click}>{child}
</div>); }
)}
</div>
}
</div>);
css is as below
.dropdown_wrapper {
position: relative;
}
.dropdown_contents {
position: absolute;
background-color: $white;
/*position: absolute;*/
box-shadow: 0 8px 14px 0 rgba(6,28,63,0.3);
z-index: 10;
}
.dropdown_item {
min-width: 150px;
min-height: 40px;
display: flex;
padding: 8px;
align-items: center;
cursor: pointer;
}
when i add the class dropdown-wrapper to the topmost div element like below in the above code
<div className="dropdown_wrapper">
<div onClick={this.handle_click}>
{toggle}
</div>
The dropdown menu is not visible properly. I see that its hidden between some other element. Could some pls help with this. thanks.
You set the position on your wrapper to relative and set the z-index for your absolute positioned dropdown element.
.dropdown_wrapper {
position: relative;
}
.dropdown_contents {
background-color: orange;
width: 100px;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
}
<div class="dropdown_wrapper">
<button>
Button
</button>
<div class="dropdown_contents">
<div>Item</div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi consequatur perspiciatis suscipit labore accusamus debitis adipisci praesentium accusantium dolor, possimus, itaque? Accusantium voluptate autem aperiam, recusandae facere ea eligendi temporibus qui deserunt nam commodi rerum aspernatur hic repellendus numquam odio deleniti. Modi beatae voluptate similique illo necessitatibus in, vero eaque. Aspernatur quis vero architecto natus laudantium non ullam necessitatibus, dolores commodi doloremque beatae? Atque reiciendis, minima deserunt ipsa temporibus perferendis facilis magnam ratione, nemo nobis. Placeat veritatis sunt officiis at officia dolore porro, obcaecati vero! Aspernatur magni sapiente quisquam maiores ducimus cumque sunt eos modi amet reiciendis, et, laudantium nihil.</p>
<p>Quis incidunt numquam, illum aut perspiciatis quae eum pariatur reprehenderit laborum a consequuntur aspernatur, atque ratione rem nisi unde quidem harum ab dignissimos consectetur cupiditate earum maxime temporibus. Illum rem, fugit, quidem tempore excepturi necessitatibus minima enim id similique esse, inventore, quod! Consequatur est ea, in deserunt? Fugiat assumenda omnis illo eveniet suscipit commodi nostrum quos cum odit earum. A, natus iusto repellat sint aspernatur nobis nostrum, qui fuga fugiat eligendi molestiae eius rem reiciendis architecto id temporibus ratione. Quasi officia quia, dolorum voluptate, quam libero voluptates vitae error nostrum officiis in. Impedit eos hic fuga incidunt cum vitae ex.</p>
<p>Magnam ut, quidem fugit dignissimos! Debitis praesentium, sed laborum ea repellendus itaque quisquam nesciunt possimus veritatis reprehenderit unde quidem, dolorum iste! Neque quos voluptate odio iusto quis, corporis cupiditate qui provident similique, rerum ratione, minima aspernatur. Cupiditate est laudantium, accusamus cum quas, ab rerum, consequatur nihil et itaque excepturi debitis quod quidem ducimus eaque minima libero doloribus reprehenderit inventore. Fugiat nulla, cupiditate eum quam, non vero magnam accusantium, numquam, rem laborum rerum quaerat. Nulla fugit repellendus iusto neque expedita esse ullam pariatur, quae fugiat modi asperiores unde alias voluptates quas ad quos dicta, soluta voluptatibus. Itaque totam quisquam modi temporibus.</p>
<p>Atque amet ducimus quibusdam voluptas, recusandae natus, doloremque reiciendis. Est sit non possimus libero at animi illo beatae nihil excepturi quos omnis, atque repellendus esse harum similique debitis delectus voluptate! Fugit saepe incidunt eos voluptatibus, dignissimos excepturi obcaecati velit expedita odit ipsum placeat molestias unde esse cupiditate laborum ratione nihil veniam totam rem magnam recusandae itaque, doloribus aut commodi. Amet, illum quae necessitatibus sint similique, velit officiis tempora neque corporis rem, ipsam ad maxime distinctio ea. Eius, inventore? Amet corporis fuga sed, perferendis quam ut dignissimos a molestiae. Cupiditate, saepe, totam. Ratione laborum a eaque. Recusandae, illum incidunt eum eveniet?</p>
<p>Porro autem veniam doloribus aliquam, repellat excepturi libero maiores soluta cumque impedit eligendi cupiditate quo, recusandae nesciunt ex optio, voluptas quia sit. Nobis nisi soluta, ab odit quae. Quia, minus placeat numquam, quisquam adipisci vel quaerat omnis quae! Ut odit, rerum. Fugiat totam dolores itaque sint repellat quo, aliquid obcaecati quasi ducimus architecto minima commodi eum quod qui laboriosam maiores voluptatibus. Debitis nulla autem soluta doloribus ipsa hic, harum mollitia incidunt sapiente, pariatur velit veniam maiores, repudiandae, consequatur quae accusantium at cupiditate illum dignissimos reprehenderit. Facere tenetur, voluptates dicta nesciunt, aliquam, neque cum est mollitia veritatis sequi magnam et cumque.</p>
<p>Explicabo possimus laboriosam quas facilis vero impedit modi enim iusto tempora magnam, at, ratione, amet qui consectetur. Alias est accusantium molestiae consectetur non enim ipsam harum, a, magnam sequi praesentium doloremque at iure iusto unde obcaecati veniam laudantium quidem quos molestias, doloribus quae id quod aliquid commodi. Unde sequi dicta doloremque dolorum repellat ipsam. Sit eos iusto reiciendis tempore hic magni corporis molestias, delectus consequuntur non obcaecati neque voluptatum assumenda, aut rerum iure autem tempora reprehenderit cumque tenetur quibusdam nihil facilis, nemo eveniet nesciunt. Totam, ea, explicabo. Iure veniam neque, consequuntur rem, libero obcaecati eius dignissimos exercitationem. Consequuntur, libero, temporibus.</p>
<p>Ad magnam corporis iure culpa dolorem vero quia, neque, ipsa quas. Qui odio perspiciatis debitis aperiam asperiores, nobis, velit ipsum tempora fuga possimus tenetur eos reprehenderit non ratione. Nesciunt inventore, suscipit architecto eligendi, nemo omnis minus. Quisquam et minima animi accusamus eligendi. Ullam pariatur, quia quidem molestias dolores, expedita. Vero magni tempore aliquid iure tenetur mollitia hic unde obcaecati enim at amet adipisci cum fugiat quam fuga eveniet saepe illum, reiciendis! Atque suscipit molestiae ex assumenda, consequuntur voluptates aliquid voluptatum excepturi optio velit facere reiciendis voluptate natus soluta asperiores praesentium necessitatibus id omnis. Explicabo laborum earum, dolore tenetur, ipsam numquam.</p>
<p>Dolorem eos, quaerat officiis nobis. Officiis rem eligendi temporibus dolore expedita, similique reiciendis ab magnam, inventore eaque fugiat nobis voluptatem voluptatum dolorum obcaecati excepturi molestias iusto unde aperiam a velit. Quasi minima perspiciatis dolor inventore, quisquam laudantium porro veniam possimus, dignissimos suscipit, ipsum aliquam iste nulla aut incidunt praesentium tenetur doloribus laborum ab animi. Neque hic, tempore enim eius accusantium fugiat architecto, assumenda laborum sit aut cumque natus, magni voluptatem iusto eligendi est modi unde aliquam quaerat. Perspiciatis quidem, cumque ex libero accusamus, magnam consequuntur quis similique facilis! Fuga dignissimos fugit suscipit harum hic blanditiis amet magnam nam cumque nostrum.</p>
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 5 years ago.
I have the this code:
header, footer {
text-align: center;
background-color: orange;
padding: 18px;
}
body {
margin: 0 auto;
max-width: 1024px;
}
section {
position: absolute;
}
footer {
}
<header>header text</header>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda eaque aliquid minima tempora ad tempore aut iure accusantium sunt, excepturi quas. Unde ullam quam velit aspernatur distinctio incidunt sapiente provident, maiores minima omnis sunt assumenda praesentium facere, hic harum animi at eaque dignissimos odit blanditiis nulla natus quo? Nostrum earum sed aut distinctio doloribus quaerat nulla atque, inventore delectus, sint blanditiis. Perferendis id iure fuga, voluptatem quo quaerat earum ipsa nam accusamus porro quasi tempora rem voluptatum non ut dolor impedit vero accusantium voluptas, ipsum neque. Quaerat dignissimos consequatur ratione? Eveniet, odit quisquam facilis iure id libero magni beatae velit recusandae praesentium tenetur quis omnis, neque sint sapiente veritatis magnam? Tempora tenetur, reiciendis aliquam nesciunt amet laudantium praesentium deserunt accusamus est at optio ea modi dolore sed repellendus! Libero voluptatem modi deserunt atque vitae quo, cupiditate ipsam minus porro nisi excepturi cumque ipsa accusantium! Ad ratione sapiente similique modi enim? Provident qui voluptatibus explicabo voluptates quidem quam officia doloribus nostrum alias cumque sint porro, molestiae quaerat recusandae labore, id ab dolores dolor ex, beatae inventore culpa aperiam? Expedita similique sapiente nesciunt harum cupiditate nulla perferendis minus saepe. Nesciunt est, cum aperiam reprehenderit, repellendus placeat, dicta unde illum dolor nemo impedit dolorem error assumenda! Aliquid soluta repellendus tenetur? Repudiandae pariatur mollitia fugiat aut fuga quod dignissimos dolorem deleniti quaerat alias dolore aspernatur consequatur, blanditiis odit atque velit, ea quam ullam. Quas, veritatis illo! Ducimus obcaecati ut id, consectetur eveniet ad placeat, minima, ab tenetur possimus soluta corrupti optio architecto? Deserunt est quaerat doloribus rem veritatis commodi debitis culpa excepturi porro eveniet, unde iure, beatae recusandae inventore tenetur. Excepturi deserunt minus expedita voluptatibus ad! Repudiandae esse dolores expedita nisi, pariatur nemo explicabo asperiores architecto non ipsa minus eum veniam delectus, nostrum deserunt, culpa dolorem magni! Deleniti sequi ex repellendus consectetur, laudantium nostrum alias, voluptatem ea velit blanditiis totam in facere tenetur modi ad similique ratione non maxime a rerum, incidunt corrupti quod quibusdam maiores? Neque dolor reiciendis placeat adipisci dignissimos dolores saepe quam et asperiores! Praesentium cupiditate laudantium soluta maxime porro odio reprehenderit fugit velit. Beatae dolorem animi dicta et iusto sed, quasi cumque debitis inventore officiis accusantium, sequi corrupti, tempore doloribus tenetur minima asperiores laboriosam voluptas soluta eum optio non voluptatem? Eum omnis impedit laborum aut laudantium praesentium optio dolorum inventore fuga temporibus. Ea aspernatur iste sapiente debitis error. Quaerat excepturi ipsa impedit hic. Nobis esse voluptate id tenetur vel perspiciatis, distinctio facere alias dignissimos laudantium dolorum veritatis beatae voluptas dolores, ipsam culpa consequatur modi, dolorem quasi eos? Tempora soluta quisquam rerum corporis quis quaerat molestiae, doloremque, nobis eos placeat provident cupiditate, quasi omnis perspiciatis architecto natus veritatis aperiam reiciendis dolorum? Odit reiciendis minus cum dicta facere, voluptas obcaecati. Cumque quod, magni voluptatem dignissimos deleniti labore perferendis atque doloribus adipisci nesciunt pariatur fugit molestias laudantium facilis quibusdam, veritatis quisquam doloremque illo consequuntur quas nostrum consequatur. Placeat tempore molestiae ducimus, animi obcaecati laboriosam hic. Tempore repellat ducimus cupiditate voluptatum doloribus, nobis qui vero. Minima ex sit expedita possimus. Dolorem rerum id praesentium!</section>
<footer>foorer text</footer>
https://codepen.io/anon/pen/boOvqz
How to make Sticky Footer (The footer must always be at the bottom)? If section must be absolute (This is necessary for the transition animation)
Add below css to .footer
footer {
position: fixed;
bottom:0;
}
Check below snippet for reference.
header,
footer {
text-align: center;
background-color: orange;
padding: 18px;
}
body {
margin: 0 auto;
max-width: 1024px;
}
section {
position: absolute;
padding-bottom: 60px;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
<header>header text</header>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda eaque aliquid minima tempora ad tempore aut iure accusantium sunt, excepturi quas. Unde ullam quam velit aspernatur distinctio incidunt sapiente provident, maiores minima omnis sunt assumenda
praesentium facere, hic harum animi at eaque dignissimos odit blanditiis nulla natus quo? Nostrum earum sed aut distinctio doloribus quaerat nulla atque, inventore delectus, sint blanditiis. Perferendis id iure fuga, voluptatem quo quaerat earum ipsa
nam accusamus porro quasi tempora rem voluptatum non ut dolor impedit vero accusantium voluptas, ipsum neque. Quaerat dignissimos consequatur ratione? Eveniet, odit quisquam facilis iure id libero magni beatae velit recusandae praesentium tenetur quis
omnis, neque sint sapiente veritatis magnam? Tempora tenetur, reiciendis aliquam nesciunt amet laudantium praesentium deserunt accusamus est at optio ea modi dolore sed repellendus! Libero voluptatem modi deserunt atque vitae quo, cupiditate ipsam minus
porro nisi excepturi cumque ipsa accusantium! Ad ratione sapiente similique modi enim? Provident qui voluptatibus explicabo voluptates quidem quam officia doloribus nostrum alias cumque sint porro, molestiae quaerat recusandae labore, id ab dolores
dolor ex, beatae inventore culpa aperiam? Expedita similique sapiente nesciunt harum cupiditate nulla perferendis minus saepe. Nesciunt est, cum aperiam reprehenderit, repellendus placeat, dicta unde illum dolor nemo impedit dolorem error assumenda!
Aliquid soluta repellendus tenetur? Repudiandae pariatur mollitia fugiat aut fuga quod dignissimos dolorem deleniti quaerat alias dolore aspernatur consequatur, blanditiis odit atque velit, ea quam ullam. Quas, veritatis illo! Ducimus obcaecati ut id,
consectetur eveniet ad placeat, minima, ab tenetur possimus soluta corrupti optio architecto? Deserunt est quaerat doloribus rem veritatis commodi debitis culpa excepturi porro eveniet, unde iure, beatae recusandae inventore tenetur. Excepturi deserunt
minus expedita voluptatibus ad! Repudiandae esse dolores expedita nisi, pariatur nemo explicabo asperiores architecto non ipsa minus eum veniam delectus, nostrum deserunt, culpa dolorem magni! Deleniti sequi ex repellendus consectetur, laudantium nostrum
alias, voluptatem ea velit blanditiis totam in facere tenetur modi ad similique ratione non maxime a rerum, incidunt corrupti quod quibusdam maiores? Neque dolor reiciendis placeat adipisci dignissimos dolores saepe quam et asperiores! Praesentium cupiditate
laudantium soluta maxime porro odio reprehenderit fugit velit. Beatae dolorem animi dicta et iusto sed, quasi cumque debitis inventore officiis accusantium, sequi corrupti, tempore doloribus tenetur minima asperiores laboriosam voluptas soluta eum optio
non voluptatem? Eum omnis impedit laborum aut laudantium praesentium optio dolorum inventore fuga temporibus. Ea aspernatur iste sapiente debitis error. Quaerat excepturi ipsa impedit hic. Nobis esse voluptate id tenetur vel perspiciatis, distinctio
facere alias dignissimos laudantium dolorum veritatis beatae voluptas dolores, ipsam culpa consequatur modi, dolorem quasi eos? Tempora soluta quisquam rerum corporis quis quaerat molestiae, doloremque, nobis eos placeat provident cupiditate, quasi
omnis perspiciatis architecto natus veritatis aperiam reiciendis dolorum? Odit reiciendis minus cum dicta facere, voluptas obcaecati. Cumque quod, magni voluptatem dignissimos deleniti labore perferendis atque doloribus adipisci nesciunt pariatur fugit
molestias laudantium facilis quibusdam, veritatis quisquam doloremque illo consequuntur quas nostrum consequatur. Placeat tempore molestiae ducimus, animi obcaecati laboriosam hic. Tempore repellat ducimus cupiditate voluptatum doloribus, nobis qui
vero. Minima ex sit expedita possimus. Dolorem rerum id praesentium!</section>
<footer>foorer text</footer>