Related
I want the body section to scroll all the way up, with the sidebar section to the top of the screen, through multiple trial-and-error, the sidebar can do that, but the content section goes back to the bottom. I want when entering that page that the content and sidebar are aligned. Did I overlook where?
<style>
/* The side navigation menu */
.sidebar {
margin: 0;
padding: 0;
width: 230px;
background-color: #f1f1f1;
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 0 15px;
}
</style>
sidebar section
<div class="sidebar">
sidebar
sidebar
sidebar
</div>
content section
<div class="content">
<div class="col-12" id="main">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h1">content</h1>
</div>
<div class="card border-success">
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto voluptatem, soluta error at sequi cum veniam dolorem obcaecati ratione sunt accusamus saepe fugiat ipsam modi reiciendis facilis illum necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus eveniet ab sed cumque repudiandae qui assumenda, aut quibusdam libero similique voluptatibus dolor dolorem fugiat explicabo? Quia illum illo maxime modi?</p>
</div>
</div>
</div>
You can use flexbox to get the desired result.
Here's an example:
.wrapper {
display: flex;
justify-content: space-between;
}
.sidebar {
position: sticky;
top: 0;
width: 230px;
height: 100vh;
}
.content {
width: 900px;
padding: 0 10px;
}
<div class="wrapper">
<div class="sidebar">
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Sunt, accusamus repudiandae.</li>
<li>Cumque, vitae ut.</li>
<li>Officiis, a esse.</li>
<li>Soluta, maiores commodi.</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde quis quas ut enim corrupti error, alias praesentium assumenda cum iure nam ipsum recusandae sint facilis quia cupiditate obcaecati tempore maxime ea qui vel eveniet eius nulla ad. Nemo
cum repellat eum eos placeat. Repellendus autem sapiente maiores error officia maxime qui neque illo nemo magnam?</p>
<p>Delectus quae ipsa quos aliquam officia. Error facere perspiciatis veritatis, doloremque nisi nesciunt quaerat cumque repellendus nam cum minus ratione. Culpa repudiandae at, perspiciatis ad ea ducimus minima molestiae rerum aut laudantium non, placeat
exercitationem saepe, impedit velit tempore distinctio illum? Libero cumque a illum perspiciatis, praesentium ea tempore dolor ducimus, consequuntur veniam aut ipsa?</p>
<p>Omnis, fuga asperiores in, dolorum optio facilis ea eaque ad dolor quidem, harum magnam nisi? Voluptate deserunt et, pariatur eum similique ab ex quisquam rem, possimus nemo eius! Veritatis, deleniti dolorum ex eveniet eaque aut rerum, exercitationem
in quisquam, adipisci explicabo provident quae non praesentium fugiat. Molestias laudantium obcaecati animi aliquam corrupti delectus iste rem.</p>
<p>Nobis aliquam cum commodi, nesciunt suscipit nemo hic reiciendis ullam doloribus distinctio consequatur, neque totam. Esse atque soluta, necessitatibus minus debitis illum error, provident totam quam quae tempore, blanditiis nobis! Eligendi dolor
illum error fuga ex distinctio. Quibusdam, omnis modi ratione consectetur, porro doloremque inventore dolorem dolores perspiciatis neque cupiditate iusto dolore voluptas blanditiis autem.</p>
<p>Impedit id eius rerum optio? Similique repellat optio nostrum, ratione maiores aperiam et. Obcaecati, iste. Saepe eligendi libero recusandae repellat, commodi ab placeat id nobis aliquam neque dolorum ipsa minima harum pariatur eaque reiciendis assumenda
perferendis animi officia! Maiores totam et quia, nulla libero odio accusantium voluptatibus, maxime, perspiciatis porro rerum dolores eaque veritatis officia!</p>
<p>Reprehenderit ducimus, saepe omnis, vel deserunt maiores nostrum similique dolorem dolorum libero nisi iste repellat ullam odit, veritatis est officiis ut adipisci fuga eius illo necessitatibus esse ratione doloremque. Accusamus neque inventore dicta
ipsa iusto ex debitis labore est, adipisci odit suscipit repellendus sit atque aliquid omnis provident explicabo minima necessitatibus sapiente nobis ratione quam.</p>
<p>Velit, consectetur veritatis et non sunt corporis repellendus totam saepe nihil voluptate exercitationem dignissimos in corrupti culpa, excepturi necessitatibus vitae fugiat. Exercitationem dolores voluptas, numquam ea libero voluptatem consequuntur
necessitatibus quia iusto quam, aperiam repellendus molestias nobis sapiente. Corrupti autem nemo commodi maxime libero assumenda nulla, animi modi alias, consequatur facilis cumque accusantium sapiente architecto!</p>
</div>
</div>
How can I force the middle div to expand vertically on screen sizes smaller than 1000px and not flow the text under the image in the third div?
Clearing floats doesn't have an effect.
This is Bootstrap 4.4.1.
https://jsfiddle.net/o4h0czv7/
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center">
<img class='img-fluid' src="https://placekitten.com/1400/300" />
<div class="title">
Kittens Kittens
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-12 text-center">
<div class="row">
<img class='img-fluid' src="https://placekitten.com/1400/400" />
<div class="text">
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-12 text-center">
<div class="row">
<img class='img-fluid' src="https://placekitten.com/1400/250" />
<div class="text">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
</div>
</div>
</div>
</div>
CSS:
body {
height: 100%;
font-size: 16px;
color:#fff;
overflow: none;
}
.text {
position: absolute;
top:0;
left:0;
right: 0;
height: 100%;
}
.title {
position: absolute;
top:10%;
left:0;
right: 0;
height: 100%;
}
Added .middle-block class for a middle container and #media (max-width: 1000px) {...} to determine changes on screens less than 1000px.
Here you can see the .middle-block .text is now relative, and .middle-block .img-fluid is absolute. So now the height of the block depends on .middle-block .text height.
Because of position: absolute combined with object-fit: cover; - the .middle-block .img-fluid starts to act like background image with background-size: cover;
body {
height: 100%;
font-size: 16px;
color: #fff;
overflow: none;
}
.text {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
}
.title {
position: absolute;
top: 10%;
left: 0;
right: 0;
height: 100%;
}
#media (max-width: 1000px) {
.middle-block .text {
position: relative;
height: auto;
z-index: 2;
}
.middle-block .img-fluid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
object-fit: cover;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center">
<img class='img-fluid' src="https://placekitten.com/1400/300" />
<div class="title">
Kittens Kittens
</div>
</div>
</div>
</div>
<div class="container-fluid middle-block">
<div class="col-12 text-center">
<div class="row">
<img class='img-fluid' src="https://placekitten.com/1400/400" />
<div class="text">
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut
reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut
reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-12 text-center">
<div class="row">
<img class='img-fluid' src="https://placekitten.com/1400/250" />
<div class="text">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
</div>
</div>
</div>
</div>
You must add the a new class to the div that you want to take the properties that you need, in this example is the middle one:
I added the class middleCat.
It uses the #media rule to include a block of CSS properties only if a certain condition is true.
How can I force the middle div to expand vertically on screen sizes
smaller than 1000px and not flow the text under the image in the third
div?
If you are talking about the horizontal pixels you will need:
#media only screen and (max-width: 1000px) {
.middleCat{
min-height:100vh;
}
}
Instead if you are refering to the vertical pixels you will need:
#media only screen and (max-height: 1000px) {
.middleCat{
min-height:100vh;
}
}
I have two simple pages. The only thing that changes is the content in <content> tag.
But the navigation bar is not exactly at same position on the two pages. It's more to the left on the about.html page. The navigation bar is ~4px offset on my computer, I need two tabs open and switch between them to see the problem.
I tested it with lastest Chrome and Firefox browsers. The problem only occurs with the computer with a browser at full screen.
After using Chrome debug I found something strange.
On home page, the html tag is 1513px witdh, with the other page it is 1496px width?!
Home.html
About.html
Home page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Nablo
</title>
<style>
html {
background-color: white;
}
body {
margin: auto;
padding: 20px;
max-width: 720px;
text-align: left;
background-color: transparent;
word-wrap: break-word;
overflow-wrap: break-word;
}
a {
color: #3273dc;
text-decoration: none;
}
a:hover {
color: #63ccff;
}
a:visited {
color: #8559da;
}
h2 a {
font-weight: 400;
color: #000;
text-decoration: none;
}
nav a {
margin-right: 10px;
}
footer {
padding: 25px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h2>
Nablo
</h2>
<nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
</nav>
</header>
<main>
<content>
<h1>Hello</h1>
<p><strong>Nablo</strong> is a light static site generator. It's :</p>
<ul>
<li><strong>Light</strong>.</li>
<li><strong>Fast</strong>.</li>
</ul>
</content>
</main>
<footer>
Made wih ♥ using nablo
</footer>
</body>
</html>
About page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Nablo
</title>
<style>
html {
background-color: white;
}
body {
margin: auto;
padding: 20px;
max-width: 720px;
text-align: left;
background-color: transparent;
word-wrap: break-word;
overflow-wrap: break-word;
}
a {
color: #3273dc;
text-decoration: none;
}
a:hover {
color: #63ccff;
}
a:visited {
color: #8559da;
}
h2 a {
font-weight: 400;
color: #000;
text-decoration: none;
}
nav a {
margin-right: 10px;
}
footer {
padding: 25px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h2>
Nablo
</h2>
<nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
</nav>
</header>
<main>
<content>
<h1>Lorem Ipsum</h1>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</content>
</main>
<footer>
Made wih ♥ using nablo
</footer>
</body>
</html>
What's causing this?
It's not just your navigation bar that is moving, it's your whole body element. Furthermore, it only seems like it's moving, but it's actually working as intended. The value auto on body's margin will always center the body element.
The home page does not have any scrollbar, but the about page has a vertical scrollbar on the right side of the page. The scrollbar takes up some width of the html element. As a result, the widths of the html element in your home page and about page are different. For instance, on my computer screen, the html element in the home page has a width of 1149px. Meanwhile, the html element in the about page has a width of 1132px. As you can see, the html width in the about page is smaller. Note that the width of the scrollbar may differ, but in my case, it has a width of 17px.
So my html element has a smaller width in the about page. So what? Well, this causes the auto values of margin in the home page and about page to be different (because the about page needs less margin to center the body element). As a result, it seems like the body element is moving.
Solution #1
What can we do? The most obvious solution is to hide the scrollbar visually. You can do this by giving scrollbar-width: none to the html element. This still allows the user to scroll (using mouse wheel), but you simply can't drag the scrollbar anymore (because it isn't there visually). Run these two snippets in your browser, the body element shouldn't be moving.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Nablo
</title>
<style>
html {
background-color: white;
}
body {
margin: auto;
padding: 20px;
max-width: 720px;
text-align: left;
background-color: transparent;
word-wrap: break-word;
overflow-wrap: break-word;
}
a {
color: #3273dc;
text-decoration: none;
}
a:hover {
color: #63ccff;
}
a:visited {
color: #8559da;
}
h2 a {
font-weight: 400;
color: #000;
text-decoration: none;
}
nav a {
margin-right: 10px;
}
footer {
padding: 25px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h2>
Nablo
</h2>
<nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
</nav>
</header>
<main>
<content>
<h1>Hello</h1>
<p><strong>Nablo</strong> is a light static site generator. It's :</p>
<ul>
<li><strong>Light</strong>.</li>
<li><strong>Fast</strong>.</li>
</ul>
</content>
</main>
<footer>
Made wih ♥ using nablo
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Nablo
</title>
<style>
html {
background-color: white;
scrollbar-width: none;
}
body {
margin: auto;
padding: 20px;
max-width: 720px;
text-align: left;
background-color: transparent;
word-wrap: break-word;
overflow-wrap: break-word;
}
a {
color: #3273dc;
text-decoration: none;
}
a:hover {
color: #63ccff;
}
a:visited {
color: #8559da;
}
h2 a {
font-weight: 400;
color: #000;
text-decoration: none;
}
nav a {
margin-right: 10px;
}
footer {
padding: 25px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h2>
Nablo
</h2>
<nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
</nav>
</header>
<main>
<content>
<h1>Lorem Ipsum</h1>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</content>
</main>
<footer>
Made wih ♥ using nablo
</footer>
</body>
</html>
Solution #2
The previous solution might be a little bad for user experience simply because the presence of a scrollbar means that the page can be scrolled. The absence of one means the contrary. Besides, scrolling by dragging the scrollbar directly is also a really common behavior. As an alternative, you can opt to use this other solution.
This solution is to give the html element a width of 100vw (100% of the viewport width). What this means is that even when there is a scrollbar in your html element, the html element will stay at a width of 100vw before scrollbar and the scrollbar will be added to the html. However, doing so makes the html element to have a width of more than 100vw. Its width is now 100vw + scrollbar's width. This will cause an overflow on the x-axis of the html element, thus causing a horizontal scrollbar to appear. We can remove the horizontal scrollbar using overflow-x: hidden.
Now, the scrollbar remains and your body element does not move. Try running these two snippets on your computer, you'll see that it works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Nablo
</title>
<style>
html {
background-color: white;
width: 100vw;
overflow-x: hidden;
}
body {
margin: auto;
padding: 20px;
max-width: 720px;
text-align: left;
background-color: transparent;
word-wrap: break-word;
overflow-wrap: break-word;
}
a {
color: #3273dc;
text-decoration: none;
}
a:hover {
color: #63ccff;
}
a:visited {
color: #8559da;
}
h2 a {
font-weight: 400;
color: #000;
text-decoration: none;
}
nav a {
margin-right: 10px;
}
footer {
padding: 25px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h2>
Nablo
</h2>
<nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
</nav>
</header>
<main>
<content>
<h1>Hello</h1>
<p><strong>Nablo</strong> is a light static site generator. It's :</p>
<ul>
<li><strong>Light</strong>.</li>
<li><strong>Fast</strong>.</li>
</ul>
</content>
</main>
<footer>
Made wih ♥ using nablo
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Nablo
</title>
<style>
html {
background-color: white;
width: 100vw;
overflow-x: hidden;
}
body {
margin: auto;
padding: 20px;
max-width: 720px;
text-align: left;
background-color: transparent;
word-wrap: break-word;
overflow-wrap: break-word;
}
a {
color: #3273dc;
text-decoration: none;
}
a:hover {
color: #63ccff;
}
a:visited {
color: #8559da;
}
h2 a {
font-weight: 400;
color: #000;
text-decoration: none;
}
nav a {
margin-right: 10px;
}
footer {
padding: 25px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h2>
Nablo
</h2>
<nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
</nav>
</header>
<main>
<content>
<h1>Lorem Ipsum</h1>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</content>
</main>
<footer>
Made wih ♥ using nablo
</footer>
</body>
</html>
The difference is from the setting margin: auto; which centers the body automatically (but for one of the pages, the longer content, the width is a bit smaller.. thus the difference.)
However, one of the pages (home) has a height of over 1000px, and the other (about) page, is very low height
if you add to the css html tag the following:
html{
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
to force the vertical scroll to be always visible, you will have the pages identical and not moving.
You can achieve the same by adding a min-height value of something relevant to your longest page content, which is mostly an unknown value, and for each visitor it might differ based on their screen size.
I have a sticky footer layout, where the footer is always positioned at the bottom of the page (even if there is no content).
Everything works in all major browsers, but I have this weird issue in IE11: when I use a big image, it has non-wanted space between the end of the content, and the footer. (Looks like the image is displayed correctly, but the height isn't calculated correctly by the browser?)
This is how it should be:
* {
padding: 0;
margin: 0;
}
.site {
/*
Old IE flexbox syntax is not needed anymore for IE11 (https://caniuse.com/#search=flexbox)
display: -ms-flexbox;
*/
}
.site__container {
display: flex;
flex-direction: column;
/*In IE11, the parent element needs a height to be able to put the footer at the bottom.
(height value doesn't matter, it just needs height. example: "height: 0;")
(https://stackoverflow.com/questions/24396205/flex-grow-not-working-in-internet-explorer-11)
*/
height: 0;
min-height: 100vh;
}
.site__main {
flex: 1 0 auto;
/* Setting flex-grow: 1 on main makes it grow to fill the available space. */
}
.site__header,
.site__main,
.site__footer {
/* By default, flex-shrink is set to 1. This makes the items shrink
if there is not enough space, which happens if the content is larger than the screen.
*/
flex-shrink: 0;
}
.site__content {
padding-bottom: 30px;
}
.site__content p {
line-height: 25px;
}
.site__header {
background: red;
}
.site__main {
background: green;
}
.site__footer {
background: blue;
}
section {
/* height: 30px; */
background: salmon;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="site__container">
<header class="site__header">Header</header>
<main class="site__main">
<section>
<div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<img src="https://placehold.it/500x300" alt="" class="img-fluid">
</div>
<div class="col-12 col-md-6">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo sed molestias voluptatum perferendis ea nisi minus, illo iusto ut quaerat saepe sunt asperiores itaque pariatur earum incidunt quos culpa vero excepturi magni quod corrupti aperiam doloremque?
Esse rerum officia modi consequatur? Ex aspernatur repellat id, ut aut nam? Esse, aut?
</div>
</div>
</div>
</div>
</div>
</section>
<section><div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
</div>
</div>
</div>
</div>
</div></section>
<section><div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
</div>
</div>
</div>
</div>
</div></section>
</main>
<footer class="site__footer">Footer</footer>
</div>
</body>
</html>
When I use the above example, and replace the image url by https://placehold.it/5000x3000, the green area gets much bigger and gives an unwanted padding between the content & footer, despite there being no content in there. (Remember, this issue is only in IE11, no other browsers)
Simply remove the display:flex and flex-direction:column property for your site__container class. Because internet explorer does not support the flex-direction properties.
Read the reference
* {
padding: 0;
margin: 0;
}
html {
position: relative;
min-height: 100%;
}
.site {
/*
Old IE flexbox syntax is not needed anymore for IE11 (https://caniuse.com/#search=flexbox)
display: -ms-flexbox;
*/
}
.site__container {
/*display: flex;
flex-direction: column;
height: 0;
min-height: 100vh;*/
/*In IE11, the parent element needs a height to be able to put the footer at the bottom.
(height value doesn't matter, it just needs height. example: "height: 0;")
(https://stackoverflow.com/questions/24396205/flex-grow-not-working-in-internet-explorer-11)
*/
margin-bottom: 60px;
}
.site__main {
flex: 1 0 auto;
/* Setting flex-grow: 1 on main makes it grow to fill the available space. */
}
.site__header,
.site__main,
.site__footer {
/* By default, flex-shrink is set to 1. This makes the items shrink
if there is not enough space, which happens if the content is larger than the screen.
*/
flex-shrink: 0;
}
.site__content {
padding-bottom: 30px;
}
.site__content p {
line-height: 25px;
}
.site__header {
background: red;
}
.site__main {
background: green;
}
.site__footer {
background: blue;
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
section {
/* height: 30px; */
background: salmon;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="site__container">
<header class="site__header">Header</header>
<main class="site__main">
<section>
<div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<img src="https://placehold.it/5000x3000" alt="" class="img-fluid">
</div>
<div class="col-12 col-md-6">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo sed molestias voluptatum perferendis ea nisi minus, illo iusto ut quaerat saepe sunt asperiores itaque pariatur earum incidunt quos culpa vero excepturi magni quod corrupti aperiam doloremque?
Esse rerum officia modi consequatur? Ex aspernatur repellat id, ut aut nam? Esse, aut?
</div>
</div>
</div>
</div>
</div>
</section>
<section><div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
</div>
</div>
</div>
</div>
</div></section>
<section><div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
</div>
</div>
</div>
</div>
</div></section>
</main>
<footer class="site__footer">Footer</footer>
</div>
</body>
</html>
What is the best way to achieve this layout:
I believe that this HTML is good, I just need the CSS:
<div>
<header style="background:blue"></header>
<div>
<nav>
<header style="background:darkgreen"></header>
<ul style="background:green">...</ul>
</nav>
<div>
<header style="background:darkred"></header>
<main style="background:red"></main>
</div>
</div>
</div>
I've tried flexbox, but I'm finding myself doing weird css calc() to get the green and red div's to stretch to the bottom.
(I'm looking for a modern, solid way- not hacks)
I am not sure how to do with your HTML. And not sure what you mean by Holy Grail. I just did this, with semantic tags and which has no hacks, compatible over a range of browsers from Internet Explorer 7:
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
body {
background-color: #fcc;
}
header {
position: fixed;
top: 0;
background-color: #66f;
left: 0;
right: 0;
height: 35px;
line-height: 35px;
}
aside {
position: fixed;
left: 0;
top: 35px;
width: 200px;
bottom: 0;
}
aside header {
position: absolute;
background-color: #f90;
}
aside .content {
position: absolute;
top: 35px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
background-color: #fc6;
}
main {
margin: 40px 10px 10px 210px;
}
main header {
top: 35px;
left: 200px;
background-color: #f33;
line-height: 20px;
height: 20px;
}
<header>
...
</header>
<aside>
<header>
...
</header>
<div class="content">
<p>Content goes here...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae unde, eligendi dolores laborum aliquid voluptatem ducimus adipisci dolorem quod ipsum corrupti soluta. Eveniet repellendus sed cumque, consectetur eum magni saepe!</p>
<p>Tenetur debitis nemo, itaque ipsa, eum tempore doloribus mollitia quas nulla accusantium unde officia rerum optio quasi a dicta error distinctio iusto, provident deleniti? Commodi perspiciatis qui ratione autem sequi.</p>
<p>Placeat saepe libero sunt cupiditate. Expedita molestias, error sequi mollitia consequatur iste aliquid deserunt deleniti repellat saepe vitae necessitatibus eum. Soluta nemo dicta fugit repellendus! Dignissimos, aliquid. Iusto, voluptatum, voluptatibus.</p>
<p>Sequi eaque officiis ab dolores aliquid, harum, nemo nam et deleniti quo aliquam, placeat, est natus iusto. Impedit assumenda ullam, tempore saepe rem adipisci, id ex, iste, dignissimos doloribus corrupti!</p>
<p>Illum nemo nihil, exercitationem autem ullam, aliquam dolorum inventore laborum quasi similique neque vero aliquid ad perferendis asperiores iusto? Quo autem recusandae, obcaecati iusto quas minus dicta reprehenderit magni quaerat.</p>
<p>Excepturi magnam rerum facere culpa a harum explicabo nostrum aspernatur. Molestiae voluptates exercitationem hic assumenda nesciunt fugit error nemo sapiente nihil consequatur illo omnis ipsum reiciendis, veniam rerum, eaque asperiores!</p>
<p>Iusto fugit mollitia, non deserunt assumenda nobis saepe id, dolorum cum culpa magni ea consectetur odio possimus facere velit voluptatum aperiam quibusdam hic, esse animi debitis. In qui cupiditate iste!</p>
<p>Eveniet nam vero maiores reiciendis totam pariatur magni tempora, rerum magnam ex, blanditiis a, odit labore consectetur ea modi minus dolore aspernatur voluptates. Magnam, hic sed omnis vel delectus? Eligendi.</p>
<p>Eveniet nesciunt laborum a officiis, numquam magnam, incidunt libero unde dolorum voluptatum, ducimus illo in eum reiciendis ad dolor eos consequuntur saepe ex repellat porro quae. Voluptatum architecto cupiditate officia.</p>
<p>Voluptate, voluptatem culpa explicabo distinctio obcaecati quia molestiae blanditiis optio quis nihil, ipsam similique molestias exercitationem quas itaque, dignissimos quisquam modi. Impedit et dolorum, laboriosam modi aliquam dolor quasi possimus!</p>
<p>Ad dolores consequuntur accusantium laborum, provident laudantium quas voluptatibus exercitationem distinctio adipisci, corporis, amet alias optio nisi! Doloremque incidunt debitis molestiae eius similique facere nobis libero esse temporibus quisquam,
aperiam?</p>
<p>Quis accusamus itaque adipisci modi perspiciatis provident suscipit assumenda totam quo placeat reiciendis, nulla ad aperiam nobis sint velit ducimus eos culpa cupiditate in, quod veritatis nihil ut quidem! Ab.</p>
<p>Consequuntur maiores quas alias labore architecto laboriosam nisi voluptatum impedit rem. Doloribus cumque, unde ducimus possimus, voluptate cupiditate veniam est, sequi, libero velit ipsa ab deleniti earum odio? Minus, earum.</p>
<p>Molestiae iusto placeat vitae mollitia maxime ipsa ad in praesentium quasi cupiditate temporibus doloremque numquam, veritatis esse et odio dolores rerum iure alias quis, quisquam, amet maiores. Sequi, eaque reprehenderit.</p>
<p>Qui hic voluptatum adipisci reprehenderit repudiandae, libero illum aliquam iure, dolores tempora, quo consequuntur odit. Exercitationem blanditiis sunt, ea consequuntur, incidunt dolor harum neque fugiat natus tempore assumenda, deleniti dolorem?</p>
</div>
</aside>
<main>
<header>
...
</header>
</main>
Preview
If you want using flex for that do this:
<div style="display:flex;flex-direction:column;height: 100vh;">
<div style="background-color:blue;height:50px;"></div>
<div style="background-color:red;flex:1;display: flex;">
<div style="background-color: green;flex: 1;">
<div style="background-color: darkgreen;height: 80px;"></div>
<div style="overflow-y: scroll;"></div>
</div>
<div style="background-color: red;flex: 2;">
<div id="navBar" style="background-color:darkred;height:40px;"></div>
</div>
</div>
</div>
Sorry my code is not clean.