Related
I am trying to make a modal from scratch without using bootstrap or similar libraries. Here is my css:
.modal-background {
position: fixed;
z-index: 2147483645;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.2);
}
.modal-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.modal-container .card {
z-index: 2147483646;
}
<div class="modal-background"></div>
<div class="modal-container">
<div class="card shadow">
<div class="card-body">
content goes here
</div>
</div>
</div>
The modal works perfectly when it is being overlayed on a web page which doesn't extend past 100% of the viewport. In other words if the page is short enough to not require scrolling then the modal displays in the center of the screen correctly.
What I am trying to figure out is how to always have the modal displayed in the center of the screen even when overlayed on a page that is long, ie: the user has scrolled down to the bottom of a page and then the modal is displayed.
Currently if the user has already scrolled to the bottom of a long page and then I display the modal, it is displayed at the top of the page out of sight from the user. How do I display it in the center of the screen so the user sees it no matter how long the page is?
ps. I am using Vue.js to show/hide the modal. So all I'm asking about is the presentation/layout of the modal.
Create a modal-wrapper and position it relative and make it fixed.
I've used lorem ipsum for demo purposes.
.modal-wrapper {
position: relative;
position: fixed;
z-index: 2147483645;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.modal-background {
position: fixed;
z-index: 2147483645;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.2);
}
.modal-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.modal-container .card {
z-index: 2147483646;
}
.card-body{
background: red;
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam in vero voluptatem asperiores odio dolores! Libero voluptatem, maxime optio neque voluptate consectetur? Natus reprehenderit nemo repellat autem debitis iure aperiam? Repudiandae itaque
aliquam assumenda ab odio fuga. Voluptatem saepe incidunt ut, nihil libero aperiam. Facere aut ut laborum similique, sapiente veniam consequatur ab nostrum labore facilis, dolore ipsa debitis dignissimos. Natus dicta repellat totam laborum sit perspiciatis
culpa cupiditate, quis, amet modi, sequi architecto reiciendis. Eos inventore incidunt dolorem suscipit magni corrupti ad, sunt similique facere consequatur nesciunt accusantium deleniti! Aspernatur asperiores omnis sint vero, id natus maiores iusto facilis
itaque eaque inventore veritatis consectetur ut recusandae voluptatibus quasi ipsam voluptatem incidunt odit! Nesciunt qui corrupti iure asperiores. Autem, cum! Distinctio hic optio id obcaecati dignissimos. Dicta, consectetur at! Voluptatibus mollitia
est, in voluptatum laudantium cumque libero qui totam cupiditate! Ullam quaerat nemo culpa? Aspernatur id officia nihil omnis eligendi. Blanditiis incidunt non dolorem officia sint maiores excepturi exercitationem laudantium accusamus voluptate praesentium
inventore molestiae, quam corporis doloribus? Animi exercitationem ab quod consectetur repellendus quas et maiores voluptate eligendi eveniet? Velit libero molestias iusto tempore nesciunt tenetur quod amet quibusdam, nostrum ex sed doloribus natus soluta
accusantium quos quis possimus, ratione nam perspiciatis rem dolorum id exercitationem sint. Rem, nam. Maxime laboriosam quidem itaque quasi facere molestias cum cumque, mollitia veniam blanditiis voluptatibus, at nisi eaque sunt. Magnam id repellendus,
in praesentium vero doloribus odit, voluptas ipsa dolore ullam magni! Quis quaerat rerum laboriosam quidem vel repellendus nobis minima iusto. Aspernatur mollitia consequuntur, sed sequi aut quis, eveniet facere eaque cumque accusantium iusto, sint tempora
fuga temporibus nisi officia saepe. Nam impedit ipsum sint qui magnam omnis recusandae consectetur fuga accusamus tempore odio, quia delectus iure explicabo harum libero, numquam corporis sunt cum eveniet ut soluta! Temporibus illum amet commodi? Quos
repudiandae culpa, iusto blanditiis possimus aperiam minima non ex voluptas debitis. Corrupti asperiores aut magnam nihil ab velit, repellat tenetur iusto facilis ipsa quod nemo soluta sequi autem! Error? Atque repellendus dolores inventore sint deserunt,
totam amet at commodi autem ex laborum velit harum temporibus. Expedita impedit repellat, minima non excepturi iusto deleniti laudantium enim libero est, sed sequi? Esse quibusdam, recusandae, molestias dignissimos reiciendis officiis ea voluptatibus
aliquam fuga voluptates illum cumque enim aliquid rerum vel sunt quia. Atque laborum fugit animi quae error. Adipisci ut illo incidunt! Esse quos ab, nemo quas corporis odit quam optio aperiam dicta, dolore libero repudiandae, consectetur ut. Quas nesciunt
dolores nemo numquam maxime minus non at vel accusantium suscipit, omnis doloribus? Aperiam necessitatibus labore rerum dolor blanditiis neque vitae in, animi iure fuga facere sequi soluta consectetur possimus molestias atque aspernatur! Corrupti aspernatur
eos vero quisquam. Beatae quas natus aliquam quaerat. Libero eveniet praesentium commodi quae voluptas, sit illo eius dolorum laboriosam perferendis sunt veniam autem quas minus vitae, omnis culpa dolores facilis, iusto repellat. Iusto in asperiores omnis
atque ea! Sapiente animi porro, exercitationem earum quod et beatae aliquid ad aliquam? Ratione necessitatibus neque perferendis, ipsum delectus adipisci. Natus facere laudantium cupiditate! Maiores voluptas eveniet, aut vel saepe cupiditate mollitia.
Similique nemo adipisci voluptates, unde, magnam a nobis tenetur doloribus accusamus quod quibusdam atque ratione. Aperiam, cum aliquid minus autem dicta, quibusdam aut in labore placeat officiis modi. Beatae, error! Blanditiis illum ut odit laudantium
tempore perferendis doloremque quod vel iste atque reprehenderit veritatis labore dolore ex, temporibus eum animi debitis velit ad minima odio repellendus quaerat. Illum, totam autem. Dolor alias magnam fugiat corrupti, dolorem praesentium iste distinctio
quibusdam eligendi quae debitis minima, consequatur blanditiis molestias impedit quisquam omnis! Voluptas dolor soluta quam beatae hic adipisci sed natus minima. Nam quam perferendis in laborum quos. Tempora, aliquam ipsam dolor sunt dolores illo magni
labore voluptate architecto veritatis et deleniti optio molestias at a nisi atque nostrum nesciunt dignissimos vitae! Ullam excepturi minima esse, et aspernatur, quam dolor debitis quidem voluptatibus officia asperiores deleniti animi, assumenda dolorem
beatae dicta! Expedita eius quidem fugiat officia voluptate illo alias dolorem, eveniet dolores? Corrupti excepturi, asperiores eveniet sunt libero omnis deleniti veniam quae magni accusantium! Dicta maxime deleniti voluptatibus possimus doloribus. Exercitationem
modi magni veritatis adipisci perspiciatis assumenda numquam velit, repudiandae deleniti nihil! Possimus, veniam rem eligendi minus voluptate voluptatem expedita similique consequuntur, illum voluptatibus fugit ipsa cum sit qui mollitia accusamus. Repudiandae
sunt sed error consequuntur sint unde assumenda, dignissimos maxime minima? Porro vel unde ab reiciendis illum corporis, repudiandae delectus, odit debitis, libero voluptates error mollitia nesciunt nobis esse quod magnam cupiditate? Dignissimos consequuntur
quisquam similique! Iusto dolorum aut ipsam dignissimos? Eaque pariatur, dolores voluptatibus, aliquam sit ratione voluptatem aspernatur eum eos, quidem animi nesciunt numquam saepe nisi corrupti asperiores esse laborum molestiae deleniti natus cumque?
Nihil accusantium odit quas! Ut. Repellat maiores possimus, suscipit sunt in omnis ipsam quaerat odit velit veniam! Quae nisi, molestias similique voluptas dignissimos dolor minima corporis nihil eaque tenetur tempore nostrum vitae voluptates, temporibus
saepe? Magni voluptas ratione obcaecati nulla architecto dolor consequuntur? Corrupti quis voluptates vitae molestiae, libero nihil voluptas labore blanditiis eaque possimus vel at cupiditate recusandae ipsam iste amet sit laborum vero. Assumenda eveniet
distinctio nemo harum. Iste neque tempore nulla vel eum. Ipsum officiis facilis nostrum quia reprehenderit vel velit eum dignissimos nulla, accusamus aperiam eius praesentium eveniet et ex saepe. Dicta aut sapiente excepturi non totam nemo quod incidunt
minus aliquid fuga eligendi illum quaerat, ut, quos, ea quis voluptate blanditiis doloremque. Officiis nam magnam repellendus minima atque ab harum! Dignissimos neque dolore harum. Illo sed ut eos expedita cupiditate sequi, rem deleniti repellat distinctio
ipsam quasi mollitia neque delectus voluptas similique, culpa quia ratione doloribus adipisci autem eligendi perspiciatis? Hic vel consequatur nulla iure, molestias pariatur doloremque! In sed porro itaque eum cupiditate illum reprehenderit nihil totam
praesentium architecto dicta assumenda, enim ea, amet ab asperiores a delectus iusto? Amet doloremque commodi provident consectetur ex voluptas molestias accusamus ea tempore quidem. Nisi ab earum cumque odio, mollitia consectetur pariatur perspiciatis
maiores officiis sunt? Obcaecati placeat distinctio soluta quod earum. Saepe est, earum suscipit vel voluptatibus aspernatur, cum veniam eveniet eos et ad sed consequatur dignissimos architecto recusandae illum unde, animi repudiandae? Esse repellat in
aspernatur dolorem tempore optio ea. Animi, maxime! Deleniti esse accusamus accusantium a ipsa, ab inventore magni, unde quaerat doloribus aspernatur beatae dolorem. Excepturi molestiae ratione iusto ullam ex aspernatur eligendi, fugiat vel, similique,
accusamus quos. Exercitationem assumenda error consequuntur dolor corporis ex maiores veniam provident labore veritatis praesentium ab enim saepe expedita quas delectus similique minus sunt odio vero ducimus esse, possimus aperiam distinctio. Doloribus.
Officiis totam ducimus laudantium itaque earum sit ipsum velit laborum dolorem dicta, praesentium, excepturi, harum ab id omnis iste eaque eum sapiente distinctio. Tempora nulla, itaque ut perspiciatis blanditiis exercitationem! Quas molestias sit officiis
veniam molestiae aliquam incidunt omnis asperiores voluptatem aliquid. Aperiam iusto repellendus ipsam, quam sunt dicta libero aspernatur et suscipit omnis, enim, nostrum quibusdam praesentium rem asperiores. Illo nobis odio ex officia possimus, quidem
nisi rerum, incidunt eveniet ad inventore ipsam alias nostrum amet eaque cupiditate ullam autem fuga a sequi architecto impedit! Hic a exercitationem quidem? Aliquid quas aliquam dignissimos optio vero, libero quia deserunt, velit maiores dolores voluptate
illo nihil? Similique sequi fugit sapiente consectetur reprehenderit impedit maiores placeat qui! Impedit quae distinctio suscipit minus! Quam, consectetur culpa perferendis, tempore commodi voluptate ab vitae porro, impedit labore fugiat? Aliquam asperiores
quaerat magni nemo, corrupti esse illo sit perferendis optio quae, expedita molestias, nam explicabo voluptatum. Error, hic. Pariatur repellendus eligendi consequuntur qui consequatur harum maiores iusto voluptate dolor numquam. Voluptas odio corporis
incidunt eveniet beatae cumque doloremque molestiae, vitae at blanditiis, expedita, sunt delectus inventore! Dolorum fugiat similique, nihil quaerat recusandae eius ut ad unde. Repellendus aut eos id a delectus commodi vero enim quidem amet nam, exercitationem
veritatis provident saepe quos autem et nemo! Quo itaque a quasi doloremque! Id, numquam necessitatibus nulla totam, nostrum consequuntur ab voluptatum dignissimos recusandae, voluptatibus laudantium unde repudiandae eius? Excepturi possimus, velit autem
pariatur consequatur consequuntur? Dolores, voluptates? Ratione aspernatur tenetur accusantium obcaecati quo exercitationem asperiores officiis architecto iste cum porro fugit incidunt repellat in molestiae eum vel tempore reiciendis harum dignissimos
voluptatum voluptates, id mollitia. Vitae, aliquid! Culpa pariatur eaque, consequatur aspernatur iure blanditiis id, cumque a maxime consequuntur minima quia repudiandae tenetur aliquid minus excepturi atque nemo facere aperiam cupiditate! Pariatur dolor
omnis commodi ratione reprehenderit. Cupiditate fuga vero accusamus ullam placeat dignissimos animi excepturi dolor est et alias repellat soluta quae totam nam sapiente accusantium, repudiandae, ipsam nobis impedit! Amet rerum esse ea libero atque! Adipisci
eos atque a dicta, sapiente nesciunt, deserunt voluptate possimus dolor placeat culpa, fugiat quasi reiciendis ut dolorem beatae! Doloribus consectetur, sit sed veniam quas eaque praesentium explicabo nihil ad! Vel quia reiciendis deleniti autem. Quidem
sit inventore, asperiores recusandae nesciunt enim, magni perspiciatis molestiae aliquid, pariatur explicabo praesentium. Voluptatum illo amet quidem tenetur, soluta consequuntur labore fugit culpa in. Itaque reprehenderit illum facere dignissimos natus
voluptates aperiam ut doloremque aliquam eos id aspernatur numquam illo necessitatibus vitae, veniam pariatur. Eum ipsam dolorem id totam nulla rem nesciunt qui iste!
<div class="modal-wrapper">
<div class="modal-background"></div>
<div class="modal-container">
<div class="card shadow">
<div class="card-body">
content goes here
</div>
</div>
</div>
</div>
One suggestion is use the grid css and a parent to contain it
.modal-background {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.modal-parent {
display: grid;
place-items: center;
}
.modal-container {
background-color: lime;
display: grid;
place-items: center;
padding: 1rem;
}
.modal-container .card {
z-index: 2;
padding: 2rem;
background-color: cyan;
}
<div class="modal-background"></div>
<div class="modal-parent">
<div class="modal-container">
<div class="card shadow">
<div class="card-body">
content goes here
</div>
</div>
</div>
</div>
I'd suggest using position: fixed which positions the element with reference to the viewport, along with the CSS logical property inset which controls the distance of each boundary from the viewport:
// irrelevant to your use-case, but shows the modal hiding and appearing:
const toggleView = (e) => {
let buttons = document.querySelectorAll('button.toggle'),
modals = document.querySelectorAll('.modal-background, .modal-container'),
currentlyOpen = !modals[0].hidden === false;
buttons.forEach(
(button) => button.classList.toggle('modalOpened', currentlyOpen)
);
modals.forEach(
(modal) => modal.hidden = !currentlyOpen
);
}
document.querySelectorAll('button.toggle').forEach(
(button) => button.addEventListener('click', toggleView)
);
.modal-background {
position: fixed;
inset: 0;
z-index: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.2);
}
.modal-container {
position: fixed;
inset: 1em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(30, 30, 30, 0.5);
}
.modal-container .card {
z-index: 100;
}
[hidden] {
display: none;
opacity: 0;
}
button.toggle {
display: block;
margin: 50vh 0 0 0;
}
button.toggle::before {
content: 'Show';
}
button.toggle.modalOpened::before {
content: 'Hide';
}
<div class="modal-background" hidden></div>
<div class="modal-container" hidden>
<div class="card shadow">
<div class="card-body">
content goes here
<button class="toggle"> the modal</button>
</div>
</div>
</div>
<!-- to illustrate that the modal can be opened, and viewed, from
anywhere in the document while still being centered on the
viewport -->
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
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>
Below is my code. When I open the page it is at the bottom but it stays on the content and when I scroll it remains in the same position, the content continuing to go below it. When I change the position to relative, it goes under the top menu.
No answer to previous questions on this site helped me. That's why I'm making a new question.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.4.2/css/all.css' integrity='sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns' crossorigin='anonymous'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.4.2/css/all.css' integrity='sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns' crossorigin='anonymous'>
<style>
* {
box-sizing: border-box;
}
body {
position: relative;
min-height: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
font-family: Segoe UI;
}
html, body {
height: 100%;
}
.sus {
width: 100%;
margin: 0px;
background-color: #ced6e2;
padding: 15px;
}
h1 {
margin: 0;
}
.meniusus {
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
margin: 0;
background-color: #0b3475;
padding: 5px;
}
.meniusus ul {
list-style-type: none;
}
.meniusus li {
display: inline;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.stanga {
width: 25%;
float: left;
}
.dreapta {
float: right;
width: 75%;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.footer {
width: 100%;
position: absolute;
display: block;
bottom: 0;
left: 0;
right: 0;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="container">
<div class="sus">
<h1> Site grozav </h1>
</div>
<div class="meniusus">
<ul>
<li> Acasa
<li> Pagina 1
<li> Pagina 2
<li> Pagina 3
<li> Contact
</ul>
</div>
<div class="stanga clearfix">
<ul>
<li> Element 1
<li> Element 2
<li> Element 3
<li> Element 4
<li> Element 5
</ul>
</div>
<div class="dreapta">
<h2> Titlu </h4>
<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? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati 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.<br>
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? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati 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.<br>
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? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati 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.<br>
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? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati 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.<br></p>
</div>
<div class="footer">
<i class='fab fa-facebook-square' style='font-size:24px'></i>
<i class="material-icons" style="font-size:30px">email</i>
<i class='fas fa-phone' style='font-size:24px'></i>
</div>
</div>
</body>
</html>
The reason for this is that position:aboslute is relative to the screen, not the page. It does not sit at the bottom because .dreapta has float:right. Just set the footer's clear to both, like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.4.2/css/all.css' integrity='sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns' crossorigin='anonymous'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.4.2/css/all.css' integrity='sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns' crossorigin='anonymous'>
<style>
* {
box-sizing: border-box;
}
body {
position: relative;
min-height: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
font-family: Segoe UI;
}
html, body {
height: 100%;
}
.sus {
width: 100%;
margin: 0px;
background-color: #ced6e2;
padding: 15px;
}
h1 {
margin: 0;
}
.meniusus {
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
margin: 0;
background-color: #0b3475;
padding: 5px;
}
.meniusus ul {
list-style-type: none;
}
.meniusus li {
display: inline;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.stanga {
width: 25%;
float: left;
}
.dreapta {
float: right;
width: 75%;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.footer {
width: 100%;
display: block;
clear: both;
background-color: lightblue;
}
#minheight {
height: calc(100vh - 164px);
}
</style>
</head>
<body>
<div id="container">
<div class="sus">
<h1> Site grozav </h1>
</div>
<div class="meniusus">
<ul>
<li> Acasa
<li> Pagina 1
<li> Pagina 2
<li> Pagina 3
<li> Contact
</ul>
</div>
<div class="stanga clearfix">
<ul>
<li> Element 1
<li> Element 2
<li> Element 3
<li> Element 4
<li> Element 5
</ul>
</div>
<div class="dreapta">
<h2> Titlu </h4>
<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? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati 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.<br>
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? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati 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.<br>
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? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati 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.<br>
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? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati 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.<br></p>
</div>
<div class="footer">
<i class='fab fa-facebook-square' style='font-size:24px'></i>
<i class="material-icons" style="font-size:30px">email</i>
<i class='fas fa-phone' style='font-size:24px'></i>
</div>
</div>
<div id='minheight'></div>
</body>
</html>
Note: The above code has #minheight to keep the footer at the bottom of the page if there isn't enough content
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.
I have just been playing around in FF32 & Safari 7, with position: sticky. And it works perfecly with top: 0px or left: 0px (to stick horizontally), but it doesn't seem to work when I try bottom: 0px or even better, combine bottom: 0; left: 0 it doesn't set itself to the bottom of the element. This behaviour could be tried out here: http://html5-demos.appspot.com/static/css/sticky.html, by simply changing the top: 10px attribut to bottom: 0. Is that not supposed to work?
I think it is a valid use-case to stick something to the bottom in the same way as one would want to stick something to the top.
In our case it is, because I am interested in having something sticky on horizontal scroll, but I want this element to be at the bottom of the parent element.
Anyway, any suggestions and extra info are welcome.
position: sticky;
bottom: 30px;
does work. Keep in mind sticky elements are relative to their parent.
http://codepen.io/corysimmons/pen/QyBMXN?editors=1100 (in Firefox)
In this case, <section> (the blue area) is the parent.
It does not work with Stickyfill though https://github.com/wilddeer/stickyfill#what-it-doesnt
I suggest you play around with it for a bit longer til you get the hang of it.
Let me know if you need a JS plugin that will behave like position: sticky without having to use position: sticky (can't wait for browser support or a stronger polyfill though).
The way to think about an element with position: sticky is as follows:
"The item that has position: sticky shall always remain in its normal place inside its parent, UNLESS said normal place goes outside of the viewport, in which case sticky item should become fixed relative to the viewport. All bets are off if the parent container also leaves the viewport, in which case the sticky items gets scrolled away with it".
This Codepen illustrates it really well. Notice how the red box stays in its normal place as long as the parent blue box is in normal view. However, when you scroll such that the red box starts to go out of the viewport, it gets fixed. Finally when the blue parent gets scrolled out of the view entirely, the red box also disappears.
* {
box-sizing: border-box;
}
body {
height: 3000px;
padding: 3rem;
}
section {
background: dodgerblue;
color: white;
line-height: 1.5;
padding: 30px;
}
div {
display: block;
width: 100px;
height: 100px;
background: tomato;
position: sticky;
bottom: 30px;
}
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt. Numquam voluptate, velit quisquam ipsa molestias laudantium odit reiciendis nisi corporis voluptatibus, voluptatum sunt natus, accusantium magnam consequatur fugit officiis minima voluptatem consequuntur nam, earum necessitatibus! Cupiditate ullam repellendus, eius iure voluptas at commodi consectetur, quia, adipisci possimus, ex mollitia. Labore harum error consectetur officiis aut optio, temporibus iste nobis ducimus cumque laudantium rem pariatur. Ut repudiandae id, consequuntur quasi quis pariatur autem corporis perferendis facilis eius similique voluptatibus iusto deleniti odio officia numquam tenetur excepturi, aspernatur sunt minima aut fugiat ipsam. Ea nesciunt, amet fugit facere similique dolor nam tempora perferendis aut fugiat non, ex pariatur excepturi odio aspernatur libero saepe ducimus rem magni cumque. Laboriosam nisi fuga accusantium quos qui? Maiores ratione aliquam eos odio eius molestiae nesciunt exercitationem dolor perspiciatis quam. Necessitatibus rem nihil ad culpa, tenetur iusto consectetur rerum, delectus neque? Error, quas, eaque! Quibusdam voluptas expedita possimus consequatur accusantium distinctio, esse quisquam, ipsa blanditiis, officia perferendis et? Iste, nam optio vero earum tenetur voluptatibus modi a, odit aliquid eos corporis nulla saepe vel neque voluptate ratione, facilis quo sed nisi voluptates nostrum dolor. Non mollitia dignissimos laudantium quos libero nisi, nobis harum, asperiores soluta reprehenderit doloremque ipsa id unde voluptates beatae deserunt. Minima repellendus ipsam molestias veritatis pariatur nobis nihil, alias quasi, esse, aspernatur saepe beatae, hic consequatur. Sit sequi, libero quisquam quibusdam fuga tempore ab molestiae praesentium, necessitatibus, vero odio ullam qui non totam voluptas reprehenderit ad neque voluptate. Nam atque impedit ducimus, dolore reiciendis delectus inventore beatae cumque. Magni, id quos officiis soluta consequatur nam quis, modi fugit adipisci vel autem dolorum iusto cumque, libero reprehenderit amet doloremque voluptatem sunt sapiente reiciendis omnis, similique nulla enim. Autem repellendus, illo eveniet recusandae quae quibusdam itaque, delectus, consequatur provident vitae vero magnam repudiandae fugit, placeat sapiente! Omnis, possimus natus obcaecati sunt harum impedit, veniam quae numquam cum eos. Suscipit nihil totam itaque odio assumenda nemo? Eos iusto voluptas, consectetur sit totam velit fuga ea impedit laboriosam, dignissimos neque ipsum! Nostrum, recusandae. Autem sit aperiam culpa neque quaerat, voluptatibus repellendus. Magnam voluptatem illo quidem sapiente, nemo neque temporibus unde harum mollitia sit dignissimos eligendi accusantium, deserunt numquam, recusandae aperiam iure vero tenetur ea suscipit. Necessitatibus vel, omnis praesentium pariatur officia! Odio maxime dolor vitae ab deleniti et accusantium, iure molestiae eaque soluta sequi, autem, quae ex labore hic dicta temporibus quibusdam animi modi qui necessitatibus nulla. Perspiciatis molestiae architecto culpa quaerat amet fuga, fugiat laboriosam tempore at adipisci, tempora laborum ducimus alias corporis beatae dolor repellendus reiciendis aut cum. Quos enim quae dolores voluptates deleniti est eum beatae impedit unde quidem cumque, labore, quod a asperiores tempora vel blanditiis? Facere corporis mollitia vitae! Exercitationem esse perferendis, et aliquid iste saepe, quos, qui dolore est facere porro. Sapiente nesciunt, ad nostrum hic optio omnis libero autem minus eius, perferendis numquam adipisci corporis nisi ipsa assumenda possimus repudiandae distinctio vel accusamus quam animi esse eos natus pariatur. Molestiae in temporibus ipsum, eveniet itaque minus facilis magnam corporis amet, aspernatur ducimus iste quis numquam laudantium saepe optio nam nisi dolore necessitatibus perferendis hic non ea labore. Impedit rerum laudantium amet aperiam. Debitis tenetur veniam molestiae ab labore maxime incidunt iste commodi recusandae, adipisci obcaecati, molestias placeat aperiam atque, dolorum facere quae nesciunt. Facere aspernatur dolore consequatur tempora veritatis qui et eos quo voluptatum ipsum nemo rerum debitis nostrum, atque ratione aliquam nulla cumque aperiam officiis? Corporis a sunt, quis vel, quae molestias vitae recusandae magni! Nostrum animi totam dolore nemo voluptatem? Nihil consequuntur corrupti quaerat quis dolorum! Culpa, at quibusdam, saepe quas accusamus sequi tempore molestiae perferendis error fugiat, in totam laboriosam. Mollitia necessitatibus eius nisi, blanditiis rem commodi doloremque dicta, hic cumque quod possimus, obcaecati nesciunt deserunt. Vel id quas aliquam, fugiat repellendus perferendis voluptate consectetur deleniti cumque harum odit dolores ducimus facere? Mollitia qui dolore ut quod facere, recusandae repellendus debitis minus aliquid delectus inventore numquam ipsam fugit doloribus, voluptatum, earum eveniet ipsa, impedit fuga! Illo ipsa dolor id enim facere ipsam similique consectetur porro sequi ea perspiciatis soluta provident, ex amet nulla quos sit. Rerum nam, odit dignissimos! Delectus, corporis perspiciatis magni tempore praesentium dolorem magnam architecto earum animi, vero, obcaecati alias distinctio quae eligendi eos doloremque assumenda. Neque temporibus doloremque, natus deserunt ipsam repellendus. Dolorum consequuntur culpa esse modi adipisci, rem natus at fuga id, architecto delectus! Culpa quaerat nulla magnam sint repudiandae, impedit quisquam iure illum, natus at nesciunt fuga obcaecati excepturi fugiat ea sed repellendus repellat aliquid vel, sunt dolores quae. Omnis nulla soluta natus consequuntur tempore, in esse autem reprehenderit cum totam fugit voluptate libero hic asperiores perspiciatis a, odio voluptatibus non alias inventore delectus impedit praesentium doloribus. Veritatis qui adipisci quisquam voluptates, similique consequatur repudiandae dignissimos accusantium rerum beatae fuga inventore. Sequi soluta maxime facere laudantium sint quae ab, dolores provident doloremque maiores quo eaque commodi veritatis, eligendi illo ipsum. Suscipit, veniam, cumque quidem, distinctio debitis magnam nesciunt dolore reiciendis minus accusantium quod ullam eaque magni. Adipisci debitis a, repellat suscipit doloribus officiis asperiores vero veritatis aliquam praesentium nihil corrupti, ipsam. Quae esse hic fugit, in harum illum laboriosam odio mollitia at dolor nam quisquam aperiam quidem error vero voluptatibus, quos dolorem ratione odit illo libero unde sunt distinctio rerum! Repellat omnis dolorum fuga dolor, molestias earum. Iure, repellendus quae nostrum temporibus odio ad. Nihil quidem enim unde nesciunt, velit esse eveniet nisi architecto ad perferendis obcaecati eum iste ipsum eligendi ut necessitatibus veritatis officiis minus non laborum. Tempore explicabo nostrum nihil. Sed eius, iure nisi saepe. Neque eaque, consectetur nostrum aliquam amet praesentium, dicta excepturi ducimus voluptatibus illum consequatur, rerum veniam omnis eos enim. At asperiores, soluta sapiente amet. Ipsum in sint iusto, cumque possimus iure quia fugiat. Facere ratione consequuntur deleniti nisi, nostrum esse. Et amet deserunt unde aliquid, magni, incidunt fugiat illo neque consequatur eum cum, alias repellendus odit voluptate. Hic ducimus, quidem, excepturi delectus rerum placeat illo exercitationem nesciunt natus voluptatum modi sequi consectetur praesentium quae eaque mollitia! Architecto excepturi atque, molestias natus.
</p>
<div></div>
</section>
If you know the height of the sticky element then you can use something like this:
.sticky-element {
position: sticky;
top: calc(100vh - 50px);
}
This would also work with Stickyfill. Not sure about browser support though.
body {
min-width: 600px;
min-height: 400px;
}
.container {
background-color: #9588c170;
/* , */
position: absolute;
width: 100%;
height: 100%;
/* overflow: scroll; */
overflow: auto;
}
.sticky {
width: 300px;
height: 200px;
background-color: #9588c1;
/* , */
position: sticky;
left: 1000px;
top: 900px;
}
<div class="container">
<div class="sticky">div</div>
</div>
.sticky-container {
position: sticky;
top: 100vh; // push it to the bottom from top
transform: translateY(-100%); // move it up again depending on its own height
width: 100%;
background: white;
padding: 20px 0;
}
with the following html:
<div id="bottom-left">I'm in the bottom left!</div>
and the following css:
#bottom-left {
width: 250px;
height: 250px;
color: #fff;
background-color: #000;
position: fixed;
bottom: 0;
left: 0;
}
you should have a sticky div in the bottom left corner of the page
Example: http://jsfiddle.net/wjxws9hy/