<aside>
<button id="change">change background-color</button>
</aside>
<h3>Clicking the button above will change the background-color of this box.</h3>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu mi, luctus id vehicula vitae, blandit in velit. Donec malesuada non mi id posuere. Ut tincidunt enim id nisl condimentum fermentum. Cras id libero eu dolor dapibus suscipit. Duis porta fermentum sagittis. Sed a arcu viverra, laoreet lorem a, euismod sem. Ut lacinia facilisis dolor sed vestibulum. Nunc sodales massa vitae nulla vestibulum, sit amet posuere lacus imperdiet.</p>
<p>Aliquam scelerisque tortor vel elementum malesuada. Etiam tellus nulla, bibendum dapibus pharetra eget, aliquet ac purus. Duis fringilla arcu massa, ac tempor nisi egestas et. Mauris fringilla, risus at feugiat rutrum, nibh nisl auctor turpis, a iaculis metus felis eu metus. Vestibulum sed congue purus, ac scelerisque augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam accumsan porta lacus eu tristique.</p>
<p>Cras tempor condimentum ligula non rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas id dignissim mauris. Etiam placerat cursus elementum. Praesent malesuada mi quis libero rutrum efficitur. Cras efficitur vitae lorem ut pharetra. Aenean pulvinar libero magna, vel finibus nisl pellentesque in. Nullam semper mi nec enim maximus, sed laoreet enim sollicitudin. Nullam sit amet odio auctor, ornare turpis et, pellentesque arcu. Donec hendrerit ornare porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse blandit nibh nec nibh convallis ultricies. Donec mauris mi, imperdiet quis ultricies eu, feugiat eu massa. Curabitur vulputate dolor vel urna bibendum lobortis. Praesent et lorem lectus.</p>
<p>Aenean condimentum felis purus, sit amet varius tortor tempor nec. Proin sit amet bibendum dolor, ut tempor nisi. Nam a fringilla leo, et feugiat justo. Aenean posuere quam non erat efficitur ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sed turpis eget risus interdum vehicula et sed magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nulla consequat, euismod magna eu, auctor enim. Integer pretium orci a metus volutpat, sed pretium massa facilisis. Vestibulum id lacus vitae justo efficitur rhoncus eu eu arcu.</p>
<p>Nam mattis tincidunt massa at porttitor. Donec ac aliquam ligula. In ullamcorper leo vitae neque tempor, vel eleifend justo commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ornare diam justo, ut venenatis arcu pharetra vitae. Nulla id sodales dui, vitae interdum magna. Vivamus gravida est massa, in convallis nulla rutrum eu. In eget lectus sed ipsum bibendum vestibulum cursus sit amet erat. Aenean mi justo, luctus at est et, varius vulputate ante. Cras ac diam erat. Morbi nec urna sem. Curabitur facilisis vehicula faucibus. Mauris nec lectus eget dui mollis fringilla in elementum massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut efficitur, risus ut sagittis vestibulum, dui nibh pulvinar neque, eu vehicula tellus ex lobortis mauris. Sed consectetur luctus massa quis sollicitudin.</p>
</main>
<h3>If the background-color is transparent then the containment isn't applied. Once a background-color is present then containment is applied.</h3>
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
html {
font-family: 'Open Sans', sans-serif;
height: 100%;
overflow: hidden;
}
body {
align-items: center;
background-color: #1d1e22;
color: white;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
margin: 0;
padding: 0;
}
aside {
left: 0;
margin: 20px;
position: fixed;
top: 50px;
}
main {
background-color: transparent;
border: 3px solid rebeccapurple;
contain: content;
height: 50vh;
overflow: auto;
width: 50vw;
}
main.change {
background-color: #1d1e22;
}
main p {
margin: 20px;
}
View Compiled
const changeBtn = document.querySelector('#change');
const main = document.querySelector('main');
change.addEventListener('click', function () {
main.classList.toggle('change');
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.