Microsoft Edge background-attachment:fixed not working

Microsoft Edge background-attachment:fixed not working - css

I have a bootstrap carousel, and we would like to have a background fixed to create a "parallax effect" as you scroll down. The background-attachment works fine in all browsers except for Edge.
If you scroll down in chrome, you'll notice the attached background working as desired. If you scroll down on Edge, the fixed background is ignored.
I am using toe following browsers:
Microsoft Edge 38.14393.0.0
Chrome 53.0.2785.116 m
I created this fiddle to test it out: https://jsfiddle.net/5r73prux/1/
<style>
.parallax {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: 50% 0;
height: 535px;
}
</style>
<div id="myCarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner" role="listbox">
<div class="item active">
<div style="background-image: url(https://placekitten.com/1024/700);" class="parallax"></div>
</div>
<div class="item">
<div style="background-image: url(https://placekitten.com/1024/700);" class="parallax"></div>
</div>
<div class="item">
<div style="background-image: url(https://placekitten.com/1024/700);" class="parallax"></div>
</div>
</div>

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.
Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.
Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper.
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales.
Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem.
Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam.
In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi.
Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus.
Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa.
Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet.
Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi.
Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.
</p>
Could you help me figure out why is Edge ignoring the background-attachment property?
Thank you very much!

I was able to fix it by adding the following css:
.carousel-inner > .item {
-webkit-perspective: initial !important;
perspective: initial !important;
-webkit-transition: initial;
-o-transition: initial;
transition: initial;
-webkit-transform: initial !important;
transform: initial !important;
}
Example:
https://jsfiddle.net/5r73prux/26/

Related

What is missing in my CSS to maintain padding around html at all times?

So I have created html / css to produce the following look; notice the Pink border all around.
But when I expand the height (using details/summary) the pink border around the bottom disappears:
how can i maintain the pink border?
html {
background-color:hotpink;
padding:10px 10px 10px 10px;
height: calc(100vh - 10px - 10px) !important; /* subtract margin-top,-bottom, so NO VERT.SCROLLBAR APPEARS */
}
body {
background-color:steelblue;
height: 100%; /* requires parent, in this case html to also have 100%, so body can increase in height*/
margin:0px; /* body has some default margin, remove it */
display:flex;
flex-direction:column; /* children (in this case navbar + container stack on top of each other */
}
.navbar {
background-color:red;
height:60px; /*manually set */
flex:none;
/* flex:1; if you set both children (navbar+.container) to flex:1, they would both occupy parent (body) in similar sizes;
i.e. it would override the manual height. Better to ommit, which is equivalent to flex:none; !NO IT'S NOT; WHEN YOU EXPAND DETAILS, if flex:none is NOT SET; the height:60px actually shrinks WTF?!
*/
display:flex; /* affects children, required !!
*/
align-items: center; /* vertically center child */
justify-content: center; /* horizontally center child */
}
.container {
background-color:yellow;
flex:1; /* stretch in the column-direction(vertically) to fill parent's remaining space */
display:flex; /* affects children, makes .row grow vertically */
}
.row {
background-color:grey;
padding:10px;
flex-grow:1; /* makes row stretch horizontally */
display:flex; /*affects children*/
flex-direction:row; /* change flex direction of row, else it would inherit from ancestors */
}
.left-col {
flex:1;
background-color:green;
padding:10px;
}
.right-col{
flex:3; /* 3,1 row is divided into 4 quarters, this occupies 3x */
background-color:blue;
padding:10px;
}
<nav class="navbar">
<div>
Youtube
some text here, actually me playing guitar
</div>
</nav>
<!-- container for left,right sections below navbar -->
<div class="container">
<div class="row">
<div class="left-col">Left</div>
<div class="right-col">Right
<p> </p>
<details>
<summary>
Yo ! Click here to view details...
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
<p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. </p>
<p>Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. </p>
<p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. </p>
<p>Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. </p>
<p>Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. </p>
<p>Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. </p>
<p>Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. </p>
<p>Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. </p>
<p>Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<p>Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
<p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. </p>
<p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
</details>
</div>
</div>
</div>

Use min-height: 100vh; border:10px solid hotpink; on the body element and remove everything from html and don't forget box-sizing:border-box;
body {
min-height: 100vh;
border: 10px solid hotpink;
box-sizing: border-box;
margin: 0;
display: flex;
flex-direction: column;
}
.navbar {
background-color: red;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.container {
background-color: yellow;
flex: 1;
display: flex;
}
.row {
background-color: grey;
padding: 10px;
flex-grow: 1;
display: flex;
}
.left-col {
flex: 1;
background-color: green;
padding: 10px;
}
.right-col {
flex: 3;
background-color: blue;
padding: 10px;
}
<nav class="navbar">
<div>
Youtube some text here, actually me playing guitar
</div>
</nav>
<!-- container for left,right sections below navbar -->
<div class="container">
<div class="row">
<div class="left-col">Left</div>
<div class="right-col">Right
<p> </p>
<details>
<summary>
Yo ! Click here to view details...
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
<p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis,
luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. </p>
<p>Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt
mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna
luctus suscipit. </p>
<p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi
lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada
tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. </p>
<p>Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet.
Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. </p>
<p>Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. </p>
<p>Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim
lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. </p>
<p>Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt
sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus
ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. </p>
<p>Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. </p>
<p>Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper.
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<p>Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan
porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula.
Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
<p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse
potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. </p>
<p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi
lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada
tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
</details>
</div>
</div>
</div>
You can also simplify your layout using CSS grid like below:
body {
min-height: 100vh;
border: 10px solid hotpink;
box-sizing: border-box;
margin: 0;
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr;
}
.navbar {
background-color: red;
grid-column: 1/-1;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.left-col {
background-color: green;
padding: 10px;
}
.right-col {
background-color: blue;
padding: 10px;
}
<nav class="navbar">
<div>
Youtube some text here, actually me playing guitar
</div>
</nav>
<div class="left-col">Left</div>
<div class="right-col">Right
<p> </p>
<details>
<summary>
Yo ! Click here to view details...
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
<p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus
non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. </p>
<p>Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit.
</p>
<p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia
molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus.
Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. </p>
<p>Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum
nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. </p>
<p>Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. </p>
<p>Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim
lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. </p>
<p>Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed,
euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum
ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. </p>
<p>Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. </p>
<p>Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper.
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<p>Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor,
cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis
in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
<p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus,
iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse
potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. </p>
<p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia
molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus.
Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
</details>
</div>

Change the height: calc(100vh - 10px - 10px) !important; as min-height: calc(100vh - 10px - 10px) !important; and add the same to the body.
html {
background-color:hotpink;
padding:10px 10px 10px 10px;
min-height: calc(100vh - 10px - 10px) !important; /* subtract margin-top,-bottom, so NO VERT.SCROLLBAR APPEARS */
}
body {
min-height: calc(100vh - 10px - 10px) !important; /* added */
background-color:steelblue;
height: 100%; /* requires parent, in this case html to also have 100%, so body can increase in height*/
margin:0px; /* body has some default margin, remove it */
display:flex;
flex-direction:column; /* children (in this case navbar + container stack on top of each other */
}
.navbar {
background-color:red;
height:60px; /*manually set */
flex:none;
/* flex:1; if you set both children (navbar+.container) to flex:1, they would both occupy parent (body) in similar sizes;
i.e. it would override the manual height. Better to ommit, which is equivalent to flex:none; !NO IT'S NOT; WHEN YOU EXPAND DETAILS, if flex:none is NOT SET; the height:60px actually shrinks WTF?!
*/
display:flex; /* affects children, required !!
*/
align-items: center; /* vertically center child */
justify-content: center; /* horizontally center child */
}
.container {
background-color:yellow;
flex:1; /* stretch in the column-direction(vertically) to fill parent's remaining space */
display:flex; /* affects children, makes .row grow vertically */
}
.row {
background-color:grey;
padding:10px;
flex-grow:1; /* makes row stretch horizontally */
display:flex; /*affects children*/
flex-direction:row; /* change flex direction of row, else it would inherit from ancestors */
}
.left-col {
flex:1;
background-color:green;
padding:10px;
}
.right-col{
flex:3; /* 3,1 row is divided into 4 quarters, this occupies 3x */
background-color:blue;
padding:10px;
}
<nav class="navbar">
<div>
Youtube
some text here, actually me playing guitar
</div>
</nav>
<!-- container for left,right sections below navbar -->
<div class="container">
<div class="row">
<div class="left-col">Left</div>
<div class="right-col">Right
<p> </p>
<details>
<summary>
Yo ! Click here to view details...
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
<p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. </p>
<p>Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. </p>
<p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. </p>
<p>Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. </p>
<p>Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. </p>
<p>Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. </p>
<p>Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. </p>
<p>Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. </p>
<p>Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<p>Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
<p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. </p>
<p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
</details>
</div>
</div>
</div>

From that I understand you want to keep border no matter how much you scroll when you should do this:
first delete all css for html tag and ad this:
html{
width: 100%;
height: 100%;
}
add this css code to your css file:
body{
box-sizing: border-box;
padding: 10px;
width: 100%;
height: 100%;
}
.border-full{
position: fixed;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 10px solid hotpink;
top: 0;
left: 0;
z-index: 1000;
}
After that add this html right after your body tag
<div class="border-full"></div>
also if you want to unset default margin and padding of all html objects add this css:
* {
margin: 0;
padding: 0;
}

How to make a pseudo element extend to full height?

I have a page with the HTML element set to full height:
html{
height:100%;
position:relative;
}
My body element contains a repeating background image as a pseudo element:
body:before{
content: "";
border:2px solid blue;
display: block;
position:absolute;
bottom:0;
left:0;
background: url("https://website.com/uploads/background-repeat.png") repeat;
width: 100%;
height: 100%;}
Inside the body I have a #wrapper element where all the contents of my SPA live:
<body id="gradient">
<!-- Wrapper -->
<div id="wrapper">
<div id="header" />
<div id="content" />
<div id="footer" /> ...
</div>
However my body element does not expand with the wrapper's contents. How do make the background alway show whilst the user scrolls down the page instead of stopping at the first fold?

body not taking auto height because you are restricting its height to 100%. So just give min-height:100% and height: auto;.
Also you can directly give background to body no need of pseudo elements.
html {
height: 100%;
}
body{
width: 100%;
height: auto;
min-height: 100%;
background: url("https://website.com/uploads/background-repeat.png") repeat;
}

If you change body:before to body the image will repeat just fine:
html {
height: 100%;
}
body {
display: block;
position: absolute;
bottom: 0;
left: 0;
background: url("http://via.placeholder.com/150x150") repeat;
width: 100%;
height: 100%;
}
h1,
p {
color: #333;
}
#wrapper,
#content,
#footer {
width: 100%;
}

<div id="wrapper">
<div id="header">
<h1>Background Stuff & Things</h1>
</div>
<div id="content">
<h1>Content</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
<div id="footer">
<h1>Footer</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
</div>
Standard Repeat
You could also do a standard repeating image for the background:
html {}
body {
background: url("http://via.placeholder.com/850x850") repeat;
}
h1,
p {
color: #333;
}
#wrapper,
#content,
#footer {
width: 100%;
}

<div id="wrapper">
<div id="header">
<h1>Background Stuff & Things</h1>
</div>
<div id="content">
<h1>Content</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
<div id="footer">
<h1>Footer</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
</div>
Fixed Background
I don't know, are you trying to achieve a fixed background?
html {}
body {
background: url("http://via.placeholder.com/850x850") repeat;
background-attachment: fixed;
}
h1,
p {
color: #333;
}
#wrapper,
#content {
width: 100%;
}

<div id="wrapper">
<div id="header">
<h1>Background Stuff & Things</h1>
</div>
<div id="content">
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
<div id="footer">
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
</div>

Div that sticks to top

I'm using bootstrap but I need a very specific div that lets users exit the site quickly. I have it fixed and styled fine but the problem is it over-laps the content. I really need it to behave like a navbar in that the content scrolls under it and I cant figure out why it won't because I'm dumb.
<html>
<head>
<style>
.closefast{
flex: auto;
position:fixed;
text-align: center;
background:#f1f1f1;
overflow: hidden;
font-size: 3em;
height:auto;
width:auto;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="closefast"><a href="https://www.google.co.uk" alt="google">
<strong>CLOSE FAST</strong> <span class="glyphicon glyphicon-eye-close">
</span></a></div>
<div class="container">All the main part of my site </div>
</body></html>
relavant code pen: http://codepen.io/Spectral/pen/eBMjdK

It works as you intended to. You just have to add content to your container. Now, with regards to the content being positioned on top of the content you have a couple of options 1) add padding to the container (padding-top: 75px) and everything inside will be shifted down by that amount example or set margin to the container (margin-top: 75px)
.container{
padding-top: 75px;
}
OR
.container{
margin-top: 75px;
}

<div style="height:75px;">
<div class="closefast">
<a href="https://www.google.co.uk" alt="google">
<strong>CLOSE FAST</strong>
<span class="glyphicon glyphicon-eye-close"></span>
</a>
</div>
</div>
Here I've enclosed your div with class closefast with another div and put a height in it.

Try this. Set the position of both close fast and container as fixed with positions.
<html>
<head>
<style>
.closefast {
text-align: center;
background: #f1f1f1;
overflow: hidden;
font-size: 3em;
width: 100%;
margin-bottom: .5rem;
position: fixed;
top: 0;
height: 75px;
}
.container {
position: fixed;
top: 75px;
height: 93%;
width: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div class="closefast">
<strong>CLOSE FAST</strong> <span class="glyphicon glyphicon-eye-close"></span>
</div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
<p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. </p>
<p>Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. </p>
<p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. </p>
<p>Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. </p>
<p>Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. </p>
<p>In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. </p>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. </p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. </p>
<p>Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. </p>
<p>Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. </p>
</div>
</body>
</html>

How can I create a two column per page print layout?

I have a long content block. What I want to do is have it print into two columns per page when I go to print it. I'm not even sure where to begin with this because of all thr parameters involved
I want to be able to place page breaks after certain blocks of content. Pretty sure I can do this with page-break-after
My content is of a dynamic height so I don't think I can calculate how much will fit on one page vs another. So this is really where I'm stumped. I think I can use column-count for this. But I'm not sure how I would do this for print view.

Just use #media print combined with column-count: https://jsfiddle.net/rcpinto/ms5mhw5g/
HTML:
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit libero eu diam dignissim, eget scelerisque lorem facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor lacus sit amet faucibus sodales. Sed mattis sed felis ut lacinia. Proin pretium augue nec condimentum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dignissim vulputate sagittis. Integer diam justo, suscipit a metus sed, facilisis condimentum nibh. Nulla ut accumsan lorem, semper iaculis lectus. Pellentesque a nulla id elit accumsan gravida venenatis at urna. Quisque convallis pellentesque arcu, nec cursus nibh bibendum vel. Praesent porta est sit amet nisi hendrerit bibendum. Sed condimentum, mi vel accumsan pellentesque, magna orci tincidunt nulla, at imperdiet nunc odio nec metus.
Sed ac interdum diam. Donec eget lacus at nisi cursus luctus. Curabitur id quam tellus. Maecenas euismod magna non faucibus lobortis. Morbi varius nunc vitae dictum pellentesque. Proin condimentum porttitor felis, a eleifend lorem viverra at. Quisque lobortis aliquet ex et malesuada. Curabitur mattis elit nec felis efficitur, et tincidunt nulla eleifend. Curabitur ac pulvinar est. Cras semper vitae mauris vitae congue. Nunc sit amet pharetra erat. Sed mattis nunc ac rhoncus euismod. Nam sapien justo, consequat in tortor vitae, vulputate varius diam. Nulla ut velit consequat enim dictum mattis sit amet quis purus. Ut malesuada sapien vel massa dapibus vehicula.
Nunc consequat neque eros, eget consectetur nisl suscipit vel. Nam eget bibendum felis. Donec pellentesque neque ultricies mi imperdiet, eu aliquet velit tempus. Sed ornare tincidunt velit, ac venenatis neque. Fusce condimentum fringilla est, eu malesuada sem faucibus hendrerit. Cras vitae placerat dui. Nam pellentesque tortor ac metus convallis mattis. Pellentesque maximus fermentum porttitor. Vestibulum vehicula enim feugiat, cursus sem non, luctus nisl. Morbi rhoncus dignissim ante et fringilla. Vivamus et augue in orci consectetur faucibus at ut ante. Etiam ipsum massa, semper ut congue a, consequat eu turpis.
Nunc rutrum erat eget lorem vehicula blandit. Vivamus dictum sem diam, semper pellentesque ipsum finibus suscipit. Aenean fringilla dapibus felis, vitae faucibus lectus ultrices a. Etiam et mi eget ex posuere venenatis. Vestibulum efficitur lacinia augue vel scelerisque. Nunc cursus nisl a odio laoreet, sit amet ornare risus faucibus. Nulla facilisi. Ut aliquam egestas justo, id dignissim urna sodales in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas ut elementum mi, eget varius sapien. Praesent lectus purus, vehicula euismod fringilla vestibulum, iaculis quis dui. In elit augue, aliquam nec nisi at, vehicula sodales tortor. Proin feugiat blandit eros, at elementum erat.
Etiam mi orci, euismod vitae mollis vel, facilisis in ipsum. Donec porta dolor sed hendrerit tempor. Morbi et eros sit amet lorem tristique luctus sed non felis. Aenean eros dui, hendrerit sed odio quis, cursus sollicitudin felis. Nullam tincidunt sed mi nec dictum. Curabitur velit purus, gravida nec luctus at, vehicula ut lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque vitae est eu ipsum scelerisque ullamcorper sit amet commodo elit. Nulla ut commodo tortor.
</div>
<input type="button" onclick="print()" value="Print">
CSS:
#media print {
#content {
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
}

Blank square in JQueryUI tab widget

I'm using tab widget from JQueryUI, I'm trying to change the background color of the widget, but when I try to style it with css, there's some blank rectangle in the middle of the data section that doesnt change. I try to trace that div on jqueryui css but I just can't find it.
This example shows the case.
HTML
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
CSS:
#tabs{
background-color: silver;
}
JavaScript:
$(function() {
$( "#tabs" ).tabs();
});
Example: http://jsfiddle.net/7LH96/1/

You are applying a background-color to #tabs which is a .ui-widget-content which has a background defined of :
background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
So your background-color is changing the color but leaving the image.
try
background: silver;

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex