I've noticed an anomaly in Edge and IE when using flexbox with scrolling columns coupled with a horizontal scroll. The following codepen demonstrates correct functionality in Chrome and FireFox; however, there is an extra scroll bar on the very right of the view for a slight vertical overflow (the height of the horizontal scroll bar) that is only present in IE 11 and Edge:
Original Codepen Example
The raw html for reference:
<body>
<div class="app-master">
<div class="app-sidebar-spacer">
</div>
<div class="app-content">
<div class="app-header">
<div class="ui secondary small menu">
<a class="right item">
<div>
<span>happy text</span>
</div>
</a>
</div>
</div>
<div class="app-work-zone">
<div class="app-zone-content">
<div class="ui segment app-zone-segment">
</div>
</div>
<div class="app-zone-buffer">
</div>
<div class="app-zone-content">
<div class="ui segment app-zone-segment">
<div>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
ip"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
sum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>
<div class="app-zone-buffer">
</div>
<div class="app-zone-content">
<div class="ui segment app-zone-segment">
</div>
</div>
<div class="app-zone-buffer">
</div>
</div>
</div>
</div>
</body>
The raw css for reference:
html,
body {
height: 100%;
margin: 0;
min-height: 100%;
padding: 0;
}
.app-master {
display: flex;
flex-direction: row;
height: 100%;
}
.app-sidebar-spacer {
flex: 0 0 215px;
background-color: #2959a5;
}
.app-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow-x: auto;
}
.app-header {
min-height: 43px;
}
.app-header>.ui.menu {
width: 100%;
}
.app-work-zone {
flex: 1 1 auto;
display: flex;
flex-direction: row;
min-height: 0;
}
.app-zone-content {
flex: 1 1 0;
min-width: 600px;
}
.app-zone-buffer {
width: 2px;
text-align: center;
}
.app-zone-segment {
height: 100%;
overflow-y: auto;
}
Notes:
I have semantic-ui loading in the codepen for basic styling, but the layout is developed using pure flexbox (not the semantic grid system).
Semantic ui already uses normalizer, so it is turned off in the codepen css.
In codepen I have "autoprefixer" turned on.
When viewing in IE, adjust the height of the preview window, and the preview window's vertical scroll bar will suddenly show scrolling.
All of my custom classes are prefixed with "app-".
Below are pictures of what seems to be a working implementation of this concept by the folks over at Asana; however, I am struggling to understand the implementation.
Image 1) With the window collapsed resulting in correct horizontal scrolling in Edge, no content hidden at the bottom of the screen, and no extraneous scroll bar at the very left of the view:
Image 2) With the window expanded (and no horizontal scrolling in Edge to demonstrate no content was hidden when horizontal scrolling was in effect):
So, is this actually a bug in IE and Edge, or does the seemingly functional implementation by Asana demonstrate a work around?
Edit 1) Added more in-depth description of the anomaly.
Edit 2) Added updated codepen link to track cross browser progress.
Edit 3) Updated final codepen with functional hacks. Functionality should now look identical across IE11, Edge, Chrome, and FF. The complete functional hack list is:
#supports (-ms-ime-align: auto) and (not (object-fit: cover)) {
.app-content {
overflow-x: scroll;
}
}
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.app-content {
overflow-x: scroll;
}
}
The following media query reverts overflow-x to auto in browsers where it was set to scroll (see hacks just above this one) when the browser width is greater than 825px. This number is derived from the 225px used for the left side-nav, and the 200 px minimum used for each flexbox item to the right of the side-nav. This prevents an extraneous horizontal scroll bar in IE11 and Edge when browser width is greater than 825px.
#media (min-width: 825px) {
.app-content {
overflow-x: auto;
}
}
Final (updated with functional hacks) Codepen Example
This is obviously a bug (haven't found any bug report yet and will update when I do).
I have tested this with Edge on Windows 10 Fall Creators Update version (Microsoft EdgeHTML 16), and is now fixed and work as it should.
Here is another post about the same issue, where one workaround for IE is to use scroll instead of auto (overflow-x: scroll)
Updated based on a comment
This is an attempt to find a CSS based hack that will detect IE 11 and Edge 12-15.
This IE 11 CSS hack appears to work properly:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.app-content {
overflow-x: scroll;
}
}
For Edge this CSS hack appears proven to work:
The following hack seems to work to find Edge:
#supports (-ms-ime-align: auto) {
.app-content {
overflow-x: scroll;
}
}
Though this also catch Edge 16, but here we got lucky as Edge 16 added support for object-fit
So by simply check for both the (-ms-ime-align: auto) and (not (object-fit: cover)), we should be able to actually distinct Edge 12-15 from 16
#supports (-ms-ime-align: auto) and (not (object-fit: cover)) {
.app-content {
overflow-x: scroll;
}
}
As noted, Microsoft appears moving to remove as many -ms prefixed properties as possible in future MS Edge, though we don't mind, as we want to target the older versions that still has them
I have tested the above 2 CSS hacks with success on IE 11 and Edge 16 using this Codepen:
https://codepen.io/anon/pen/RZYeJo
If anyone find this not work on a specific Edge version, please let me know so I can keep this post up to date.
For you who prefer to use Javascript, here is a post with some interesting reading:
Instead of using prefixes I want to ask site visitors to upgrade their browser
Related
Here's a sample:
div {
height: 0;
overflow: hidden;
padding: 12px;
background: tan;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
Is there a way to prevent padding from increasing the size of the div? Some threads suggest using box-sizing: border-box, but it doesn't seem to work in this case.
Replace it with margin by adding an extra div
div.box {
height: 0;
overflow: hidden;
background: tan;
}
div.box div {
margin: 12px;
}
<div class="box">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
Or consider some hack with pseudo element:
div.box {
height: 0;
overflow: hidden;
background: tan;
padding: 0 15px; /* horizontal padding */
}
div.box:before,
div.box:after {
content: "";
display: block;
height: 12px; /* vertical padding */
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
If you are there for extra space, you can use {margin} instead which will only add space outside of the ““ box. Also if you want spacing between the text, you can use css property {line-height}.
I am trying to creating PDF from html using wkhtmltopdf libraray (https://github.com/wkhtmltopdf/wkhtmltopdf)
But ihave issue in creating two column pdf like newparers .
This issue is listed in a number of Posts, However, no solution is provided.
Using CSS,
.newsection { -webkit-column-count: 2; /* Chrome, Safari, Opera /
-moz-column-count: 2; / Firefox */
column-count: 2;}
does not render PDF with Newspaper style columns.
Desired output shown below;
try this brother.. :)
https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1872#issuecomment-50742814
/* docs: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1872#issuecomment-50742814 */
.container-two-row {
/* You *must* define a fixed height which is
large enough to fit the whole content,
otherwise the layout is unpredictable. */
height: 28em;
/* Width and count aren't respected, but you
have to give at least some dummy value (??). */
-webkit-columns: 0 0;
/* This is the strange way to define the number of columns:
50% = 2 columns, 33% = 3 columns 25% = 4 columns */
width: 50%;
/* Gap and rule do work. */
-webkit-column-gap: 1px;
-webkit-column-rule: 1px solid black;
text-align: left;
}
.height-35em {
height: 35em;
}
.mt-15 {
margin-top: 15px;
}
<div class="container-two-row height-35em mt-15">
<strong>An Article</strong>
<div>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
I have this (Erb) HTML:
<article class="grid-container">
<header class="grid-centered">
<h1><%= #post.title %></h1>
</header>
<div class="content grid-reading grid-item-max grid-container">
<%= markdown(#post.body) %>
</div>
</article>
The <%= >% will run the code in between and output HTML strings.
And CSS:
.grid-container {
display: grid;
grid-template-columns: repeat(24, 1fr);
}
.grid-centered {
grid-column: 4 / span 18;
}
.grid-reading {
grid-column: 6 / span 14;
}
.grid-item-max {
grid-column: 1 / -1;
}
.content p {
grid-column: 6 / span 14;
}
Two posts follow with same content but different render results.
Working:
---
layout: post
title: Works
url: works
---
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Working screenshot:
Not working content:
---
layout: post
title: Works
url: works
---
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Not working screenshot:
The not working one's grid got squeezed.
I tried on codepen, but cannot reproduce it:
https://codepen.io/JuanitoFatas/pen/KKwdjMx
Two pages of same content renders differently with same HTML and CSS.
Any pointer or debugging advice? Thanks!
Using Firefox 71.0 on macOS 10.15.1 (Safari 13.0.3 also has this same problem :/)
Turns out the not working post I actually have some nested elements in the bottom of the page that I do not have the CSS to control them fall within the grid, so they're off the grid and resulted in above squeezed grid columns. Sorry for oversimplify the question here.
I need layout with 3 columns with an image spanning across 2 in top right corner. Found several solutions, best one here:
Advanced CSS tricks: How to span an image over multiple columns in a CSS3 site layout?
But: Both don't work with Chrome. The negative top-margin makes the text disappear behind a non discoverable something.
I used the solution with the absolute positioning of the floater, as in the other solution the left margin of the floater would be a reason why the text becomes invisible...
I used div#floater to represent the image, has same effect.
HTML:
<div id="outer">
<div id="floater">
</div>
<div id="inner">
<h1>Title1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Title2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Title3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
And the CSS code:
#outer{
position: relative;
font-size: 10pt;
width: 100vw;
min-height: 88vh;
column-count: 3;
column-gap: 1vw;
padding-top: 54vw;
background-color: red;
}
#outer #floater{
position: absolute;
right: 0;
top: 0;
width: 66vw;
height: 50vw;
margin-bottom: 2vw;
display: block;
border: 2px solid blue;
}
#outer #inner{
max-width: 100vw;
background-color: green;
margin-top: -11vw;
}
I made a fiddle, in Chrome 'Title 1' diappears, in Safari and Firefox no problem. Any suggestions?
https://jsfiddle.net/20drzb3k/5/
You can give a try to backface-visibilty to cure that visual bug.
#outer #inner > *{
backface-visibility:hidden;
}
https://jsfiddle.net/20drzb3k/7/
For infos, Here is another example with a different approach (a pseudo element is pulling up first col content. https://codepen.io/gc-nomade/pen/boZaVJ
I experience some issues working with flexbox. Here is where I want to get:
I want to have a flexbox styled window. On the left, taking 2/3 of the screen, I will ahve some longer content. On the right, taking 1/3 of the screen, I want to have a background image that always fills the viewport height, even if I scroll down on the left.
The current html structure roughly looks like:
<div class="layout horizontal wrap">
<div class="flex flex-2" id="main-content">
{{ scrollable content }}
</div>
<div class="flex flex-1" id="image">
{{ fixed image }}
</div>
</div>
Thanks for you input!
Of course don't use flex on body.
html , body {
margin: 0;
width: 100%;
height: 100%;
}
body {
display: flex;
}
.big {
width: 66.66%;
background: #E0E0E0;
overflow: auto;
}
.small {
width: 33.33%;
background: blue;
}
<div class="big">
<h1>Scroll</h1>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
<div class="small"> Fixed
</div
set the height for the blue div to 100vh;
100vh is 100% of viewport
the-blue-div{
height:100vh;
}