Related
I am trying to work with intersectionObserver but it is acting wierd while trying with translationX. I wanted to translate all the .feature class form right to left as I scroll down but for some reason it is pushing contents outside of the viewport and it goes back to normal after all the items are visible.
Edit:
The above problem is occuring When i refresh page while viewing .feature class and it shows directly after refresh.
Found a solution:
Due to overflow hidden my documet was being scroll lock before the tranlation at the right side. Using animation soved my problem. :)
When I try to translate from left to right by changing
.feature{
opacity: 0;
transition: opacity 200ms ease-in,
transform 200ms ease-in;
transform: translateX(400px);
}
to
.feature{
opacity: 0;
transition: opacity 200ms ease-in,
transform 200ms ease-in;
transform: translateX(-400px);
}
it is working properly.
here is my codes.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll effect</title>
<link rel="stylesheet" href="style.css">
<script src="mian.js" defer></script>
</head>
<body>
<div class="space"></div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
</body>
</html>
main.js
const features = document.querySelectorAll(".feature");
const observer = new IntersectionObserver(function (entries, observer) {
entries.forEach( entry => {
if (!entry.isIntersecting) {
return
}
entry.target.classList.toggle("viewed")
observer.unobserve(entry.target);
})
}, {threshold: 0, rootMargin: "-200px"})
features.forEach(feature => {
observer.observe(feature)
})
style.css
body{
overflow-x: hidden;
}
.space{
height: 100vh;
}
.grid{
display: grid;
}
.grid.features{
gap: 2rem;
grid-template-columns: repeat(3, 1fr);
}
.feature{
opacity: 0;
transition: opacity 200ms ease-in,
transform 200ms ease-in;
transform: translateX(400px);
}
.viewed{
opacity: 1 !important;
transform: translateX(0px) !important;
}
Image
I wanted to create a text-based page using just HTML and CSS, the point is that there should be two columns, the first 2/3 of the width (as it will be filled by the important text) and the later one 1/3 of the remaining width, just to add details and so,
ive been fidgeting with this code:
.position-trbl-0 {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.overflow-hidden {
overflow: hidden;
}
.row {
display: flex;
overflow: hidden;
height: 100%;
width: 100%;
}
.col {
height: 100%;
padding: 0 20px;
overflow: hidden;
}
.col-inner {
height: 100%;
width: 100%;
padding: 0 30px;
overflow-y: scroll;
box-sizing: content-box;
}
.overflow-auto {
overflow: auto;
}
<div class="w-100 position-fixed position-trbl-0">
<div class="container-fluid position-relative position-trbl-0 overflow-hidden h-100">
<div class="row">
<div class="col">
<div class="col-inner">
<p class="p-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem voluptates suscipit vero perferendis, odio officiis doloribus quae voluptatum debitis sint reiciendis, expedita, saepe eligendi esse numquam! Odio aperiam quidem delectus?
Enim repellendus nemo dolorum culpa accusantium? At ab laborum harum quasi sunt impedit labore ullam. Saepe ut dolorum omnis, corrupti eveniet atque, illum nulla quia soluta error officiis consequuntur inventore!
Cupiditate, ipsum consectetur labore beatae quia adipisci dignissimos illum molestias, sed facere temporibus sint sit et neque. Animi dolores nemo pariatur dolor delectus assumenda temporibus, ratione dignissimos rem cum voluptas.
Libero aliquid laborum doloremque fuga impedit? Consequatur fuga ea, illo dolores sunt maiores laboriosam blanditiis, numquam quod dicta veniam sequi minima, vitae at! Accusantium maxime animi, iusto a impedit rem.
Necessitatibus ipsam accusantium esse quasi labore, modi veritatis! Dolorum corrupti quisquam fugit unde. Consequatur impedit a totam cum nulla deleniti at atque commodi et repellat! Exercitationem quisquam ducimus itaque accusantium?
Neque voluptate id quisquam deleniti voluptas distinctio veniam quasi ipsum nam, vitae, ipsa nihil. Voluptas quisquam vel eligendi consequuntur sit rerum rem a magni, dolorem quod cumque? Accusantium, neque assumenda!
Tempore dignissimos corporis, ratione nihil qui quod itaque facilis laudantium quasi impedit cumque facere ex debitis distinctio ab ipsa beatae enim ut libero. Voluptatum quibusdam soluta quo, voluptatem at a.
Natus explicabo alias, non vel veniam similique soluta enim porro corporis ea deleniti ipsam consectetur debitis inventore laboriosam omnis nihil labore, placeat eligendi? Excepturi quod in sit aut aliquid assumenda.
Architecto assumenda officiis nostrum beatae nam aliquam quisquam tenetur aut. Ipsa earum excepturi, beatae incidunt vero nostrum accusantium. Quam officiis facere eos consectetur fugiat fugit minima, et necessitatibus consequuntur dicta.
Illo modi asperiores incidunt porro voluptates eaque repellendus quis sunt quae nam adipisci, officiis corporis quo dignissimos minus, deserunt amet, nihil fugiat recusandae quibusdam doloribus expedita! Cumque expedita ullam consequatur.
Reprehenderit aperiam, aut nisi ipsa aliquid ipsum hic facilis! Cupiditate, quidem soluta. Facilis rerum, fugit illum laudantium, labore minima corrupti molestiae doloremque corporis itaque animi ullam reprehenderit odio iure? In.
Vero at delectus neque cumque totam, laboriosam ipsa temporibus id voluptates officia aliquam! Nulla, adipisci minima quisquam perferendis incidunt dolorem ab? Reiciendis dolorum expedita iusto! Consequuntur distinctio velit facilis dolorem.
Voluptatum ipsum necessitatibus eligendi natus possimus autem consectetur tenetur, cumque aspernatur dignissimos, est alias vel numquam, accusantium omnis repudiandae laboriosam fugit ex aliquam corporis molestiae! Earum, nobis! Voluptatibus, distinctio saepe.
Voluptatem distinctio doloremque autem libero fugit praesentium neque cum? Vero, molestiae? Adipisci a voluptate, consectetur culpa, quos, reprehenderit sequi maiores cupiditate sit voluptatum distinctio obcaecati illo nesciunt. Iusto, reprehenderit eius.
Cumque vel delectus, tenetur nisi, cupiditate facilis recusandae, optio et voluptatibus voluptas quibusdam accusamus! Cupiditate, asperiores provident necessitatibus ipsa fugit repellendus laborum et dolor possimus fugiat non eaque aut iure.
Tempore earum possimus accusamus ut cum, ipsa odit velit? Quaerat doloribus quam, perspiciatis facere ullam vel, explicabo, voluptas esse minus nam aliquid nobis laudantium! Rerum eos dolor suscipit ratione aperiam.
Sed eaque exercitationem at repudiandae sunt quisquam dolor! Eveniet aliquid nam odio, aliquam, similique voluptates dolor quo non voluptatum sed mollitia, nobis ipsum doloremque enim eaque magnam odit laudantium atque.
Reprehenderit fuga molestiae facere reiciendis, magnam obcaecati itaque consectetur dolorem laborum? Natus distinctio, nemo repudiandae eos quae obcaecati sunt excepturi ut accusamus quam iure quis suscipit ducimus non! Officia, deleniti.
Libero nihil non voluptatem, dolore mollitia perferendis eligendi distinctio pariatur dolor repellendus quae eveniet sit quos alias voluptatum optio illo porro temporibus deserunt doloremque vitae impedit et aliquam minus. Excepturi?
Molestiae, aspernatur repudiandae quidem maiores mollitia laborum illum nisi nihil impedit nam doloremque voluptatem. Quo architecto doloribus, nisi non officiis, perferendis, vel ad maiores assumenda debitis quibusdam eligendi modi perspiciatis?
A dignissimos ullam natus laudantium hic ad, officiis atque maiores magni enim, ea voluptates numquam placeat? Nihil, id odit. Enim, beatae. Odio debitis itaque facere, expedita dicta adipisci possimus nisi.
Alias at aliquam sunt? Aperiam dolorum possimus ab quis nostrum assumenda velit, dignissimos optio dolor repellendus adipisci perspiciatis nihil eveniet numquam cupiditate sint laborum quisquam, ipsum eum magnam? Ipsum, dignissimos?
Fugit tempora a sequi enim perferendis minima itaque consequuntur harum explicabo quidem cum, ea officiis totam odit exercitationem temporibus hic iure, quae sunt aspernatur labore nulla earum. Expedita, eaque esse.
Iusto mollitia, eum rem necessitatibus in architecto sequi dolores maiores labore tempora aliquid optio harum quaerat vel quod recusandae sint aspernatur culpa ab. Nesciunt nemo consequatur adipisci officia pariatur at?
Est placeat voluptas porro architecto ipsum sit. Id inventore odio quia pariatur laboriosam aliquid totam sunt suscipit, incidunt illum ipsum laudantium quis corporis quaerat, accusantium commodi tempora asperiores, maxime facilis.
Rerum ducimus consequatur eos amet, consectetur voluptatem. Enim maxime cumque rerum ut sit fugiat temporibus expedita similique, iusto modi provident quisquam nam deleniti velit animi consequuntur repellendus corrupti, blanditiis neque?
Dolores vero nostrum praesentium adipisci quidem! Ad commodi necessitatibus nam dolorem enim, fuga eaque repudiandae quod ducimus, labore mollitia. Doloribus excepturi vitae quasi optio numquam itaque, exercitationem deleniti esse! Eos?
Soluta a odio incidunt corrupti illum. Amet possimus fugiat atque qui mollitia eum, reprehenderit aliquid ab ex sequi quos! Sint dolorem provident nihil nemo facere, officiis incidunt. Esse, illo voluptatum!
Velit atque, fugit ab dolor est dicta necessitatibus obcaecati vero recusandae inventore rerum saepe iure exercitationem numquam neque. Beatae atque necessitatibus nam facilis, qui eos ea a tempore harum nostrum.
Nulla rerum doloribus pariatur fugit necessitatibus libero explicabo molestias eum excepturi laboriosam quos dolores animi quasi dicta, maxime deserunt! Maiores veritatis cumque illo ad. Libero odio necessitatibus delectus dolorem corporis.
</p>
</div>
</div>
<div class="col">
<div class="col-inner">
<p class="p-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem voluptates suscipit vero perferendis, odio officiis doloribus quae voluptatum debitis sint reiciendis, expedita, saepe eligendi esse numquam! Odio aperiam quidem delectus?
Enim repellendus nemo dolorum culpa accusantium? At ab laborum harum quasi sunt impedit labore ullam. Saepe ut dolorum omnis, corrupti eveniet atque, illum nulla quia soluta error officiis consequuntur inventore!
Cupiditate, ipsum consectetur labore beatae quia adipisci dignissimos illum molestias, sed facere temporibus sint sit et neque. Animi dolores nemo pariatur dolor delectus assumenda temporibus, ratione dignissimos rem cum voluptas.
Libero aliquid laborum doloremque fuga impedit? Consequatur fuga ea, illo dolores sunt maiores laboriosam blanditiis, numquam quod dicta veniam sequi minima, vitae at! Accusantium maxime animi, iusto a impedit rem.
Necessitatibus ipsam accusantium esse quasi labore, modi veritatis! Dolorum corrupti quisquam fugit unde. Consequatur impedit a totam cum nulla deleniti at atque commodi et repellat! Exercitationem quisquam ducimus itaque accusantium?
Neque voluptate id quisquam deleniti voluptas distinctio veniam quasi ipsum nam, vitae, ipsa nihil. Voluptas quisquam vel eligendi consequuntur sit rerum rem a magni, dolorem quod cumque? Accusantium, neque assumenda!
Tempore dignissimos corporis, ratione nihil qui quod itaque facilis laudantium quasi impedit cumque facere ex debitis distinctio ab ipsa beatae enim ut libero. Voluptatum quibusdam soluta quo, voluptatem at a.
Natus explicabo alias, non vel veniam similique soluta enim porro corporis ea deleniti ipsam consectetur debitis inventore laboriosam omnis nihil labore, placeat eligendi? Excepturi quod in sit aut aliquid assumenda.
Architecto assumenda officiis nostrum beatae nam aliquam quisquam tenetur aut. Ipsa earum excepturi, beatae incidunt vero nostrum accusantium. Quam officiis facere eos consectetur fugiat fugit minima, et necessitatibus consequuntur dicta.
Illo modi asperiores incidunt porro voluptates eaque repellendus quis sunt quae nam adipisci, officiis corporis quo dignissimos minus, deserunt amet, nihil fugiat recusandae quibusdam doloribus expedita! Cumque expedita ullam consequatur.
Reprehenderit aperiam, aut nisi ipsa aliquid ipsum hic facilis! Cupiditate, quidem soluta. Facilis rerum, fugit illum laudantium, labore minima corrupti molestiae doloremque corporis itaque animi ullam reprehenderit odio iure? In.
Vero at delectus neque cumque totam, laboriosam ipsa temporibus id voluptates officia aliquam! Nulla, adipisci minima quisquam perferendis incidunt dolorem ab? Reiciendis dolorum expedita iusto! Consequuntur distinctio velit facilis dolorem.
Voluptatum ipsum necessitatibus eligendi natus possimus autem consectetur tenetur, cumque aspernatur dignissimos, est alias vel numquam, accusantium omnis repudiandae laboriosam fugit ex aliquam corporis molestiae! Earum, nobis! Voluptatibus, distinctio saepe.
Voluptatem distinctio doloremque autem libero fugit praesentium neque cum? Vero, molestiae? Adipisci a voluptate, consectetur culpa, quos, reprehenderit sequi maiores cupiditate sit voluptatum distinctio obcaecati illo nesciunt. Iusto, reprehenderit eius.
Cumque vel delectus, tenetur nisi, cupiditate facilis recusandae, optio et voluptatibus voluptas quibusdam accusamus! Cupiditate, asperiores provident necessitatibus ipsa fugit repellendus laborum et dolor possimus fugiat non eaque aut iure.
Tempore earum possimus accusamus ut cum, ipsa odit velit? Quaerat doloribus quam, perspiciatis facere ullam vel, explicabo, voluptas esse minus nam aliquid nobis laudantium! Rerum eos dolor suscipit ratione aperiam.
Sed eaque exercitationem at repudiandae sunt quisquam dolor! Eveniet aliquid nam odio, aliquam, similique voluptates dolor quo non voluptatum sed mollitia, nobis ipsum doloremque enim eaque magnam odit laudantium atque.
Reprehenderit fuga molestiae facere reiciendis, magnam obcaecati itaque consectetur dolorem laborum? Natus distinctio, nemo repudiandae eos quae obcaecati sunt excepturi ut accusamus quam iure quis suscipit ducimus non! Officia, deleniti.
Libero nihil non voluptatem, dolore mollitia perferendis eligendi distinctio pariatur dolor repellendus quae eveniet sit quos alias voluptatum optio illo porro temporibus deserunt doloremque vitae impedit et aliquam minus. Excepturi?
Molestiae, aspernatur repudiandae quidem maiores mollitia laborum illum nisi nihil impedit nam doloremque voluptatem. Quo architecto doloribus, nisi non officiis, perferendis, vel ad maiores assumenda debitis quibusdam eligendi modi perspiciatis?
A dignissimos ullam natus laudantium hic ad, officiis atque maiores magni enim, ea voluptates numquam placeat? Nihil, id odit. Enim, beatae. Odio debitis itaque facere, expedita dicta adipisci possimus nisi.
Alias at aliquam sunt? Aperiam dolorum possimus ab quis nostrum assumenda velit, dignissimos optio dolor repellendus adipisci perspiciatis nihil eveniet numquam cupiditate sint laborum quisquam, ipsum eum magnam? Ipsum, dignissimos?
Fugit tempora a sequi enim perferendis minima itaque consequuntur harum explicabo quidem cum, ea officiis totam odit exercitationem temporibus hic iure, quae sunt aspernatur labore nulla earum. Expedita, eaque esse.
Iusto mollitia, eum rem necessitatibus in architecto sequi dolores maiores labore tempora aliquid optio harum quaerat vel quod recusandae sint aspernatur culpa ab. Nesciunt nemo consequatur adipisci officia pariatur at?
Est placeat voluptas porro architecto ipsum sit. Id inventore odio quia pariatur laboriosam aliquid totam sunt suscipit, incidunt illum ipsum laudantium quis corporis quaerat, accusantium commodi tempora asperiores, maxime facilis.
Rerum ducimus consequatur eos amet, consectetur voluptatem. Enim maxime cumque rerum ut sit fugiat temporibus expedita similique, iusto modi provident quisquam nam deleniti velit animi consequuntur repellendus corrupti, blanditiis neque?
Dolores vero nostrum praesentium adipisci quidem! Ad commodi necessitatibus nam dolorem enim, fuga eaque repudiandae quod ducimus, labore mollitia. Doloribus excepturi vitae quasi optio numquam itaque, exercitationem deleniti esse! Eos?
Soluta a odio incidunt corrupti illum. Amet possimus fugiat atque qui mollitia eum, reprehenderit aliquid ab ex sequi quos! Sint dolorem provident nihil nemo facere, officiis incidunt. Esse, illo voluptatum!
Velit atque, fugit ab dolor est dicta necessitatibus obcaecati vero recusandae inventore rerum saepe iure exercitationem numquam neque. Beatae atque necessitatibus nam facilis, qui eos ea a tempore harum nostrum.
Nulla rerum doloribus pariatur fugit necessitatibus libero explicabo molestias eum excepturi laboriosam quos dolores animi quasi dicta, maxime deserunt! Maiores veritatis cumque illo ad. Libero odio necessitatibus delectus dolorem corporis.
</p>
</div>
</div>
</div>
</div>
</div>
but can't seem to find it!
This is a grid solution, and the :nth-child() pseudo-class for the col class.
The first column is 2/3 and the second is 1/3.
.position-trbl-0 {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.overflow-hidden {
overflow: hidden;
}
.row {
display: grid;
grid-template-columns: auto auto auto;
overflow: hidden;
height: 100%;
width: 100%;
}
.col {
height: 100%;
padding: 0 20px;
overflow: hidden;
}
.col:nth-child(1) {
grid-column: 1 / span 2;
}
.col-inner {
height: 100%;
width: 100%;
padding: 0 30px;
overflow-y: scroll;
box-sizing: content-box;
}
.overflow-auto {
overflow: auto;
}
<div class="w-100 position-fixed position-trbl-0">
<div class="container-fluid position-relative position-trbl-0 overflow-hidden h-100">
<div class="row">
<div class="col">
<div class="col-inner">
<p class="p-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem voluptates suscipit vero perferendis, odio officiis doloribus quae voluptatum debitis sint reiciendis, expedita, saepe eligendi esse numquam! Odio aperiam quidem delectus?
Enim repellendus nemo dolorum culpa accusantium? At ab laborum harum quasi sunt impedit labore ullam. Saepe ut dolorum omnis, corrupti eveniet atque, illum nulla quia soluta error officiis consequuntur inventore!
Cupiditate, ipsum consectetur labore beatae quia adipisci dignissimos illum molestias, sed facere temporibus sint sit et neque. Animi dolores nemo pariatur dolor delectus assumenda temporibus, ratione dignissimos rem cum voluptas.
Libero aliquid laborum doloremque fuga impedit? Consequatur fuga ea, illo dolores sunt maiores laboriosam blanditiis, numquam quod dicta veniam sequi minima, vitae at! Accusantium maxime animi, iusto a impedit rem.
Necessitatibus ipsam accusantium esse quasi labore, modi veritatis! Dolorum corrupti quisquam fugit unde. Consequatur impedit a totam cum nulla deleniti at atque commodi et repellat! Exercitationem quisquam ducimus itaque accusantium?
Neque voluptate id quisquam deleniti voluptas distinctio veniam quasi ipsum nam, vitae, ipsa nihil. Voluptas quisquam vel eligendi consequuntur sit rerum rem a magni, dolorem quod cumque? Accusantium, neque assumenda!
Tempore dignissimos corporis, ratione nihil qui quod itaque facilis laudantium quasi impedit cumque facere ex debitis distinctio ab ipsa beatae enim ut libero. Voluptatum quibusdam soluta quo, voluptatem at a.
Natus explicabo alias, non vel veniam similique soluta enim porro corporis ea deleniti ipsam consectetur debitis inventore laboriosam omnis nihil labore, placeat eligendi? Excepturi quod in sit aut aliquid assumenda.
Architecto assumenda officiis nostrum beatae nam aliquam quisquam tenetur aut. Ipsa earum excepturi, beatae incidunt vero nostrum accusantium. Quam officiis facere eos consectetur fugiat fugit minima, et necessitatibus consequuntur dicta.
Illo modi asperiores incidunt porro voluptates eaque repellendus quis sunt quae nam adipisci, officiis corporis quo dignissimos minus, deserunt amet, nihil fugiat recusandae quibusdam doloribus expedita! Cumque expedita ullam consequatur.
Reprehenderit aperiam, aut nisi ipsa aliquid ipsum hic facilis! Cupiditate, quidem soluta. Facilis rerum, fugit illum laudantium, labore minima corrupti molestiae doloremque corporis itaque animi ullam reprehenderit odio iure? In.
Vero at delectus neque cumque totam, laboriosam ipsa temporibus id voluptates officia aliquam! Nulla, adipisci minima quisquam perferendis incidunt dolorem ab? Reiciendis dolorum expedita iusto! Consequuntur distinctio velit facilis dolorem.
Voluptatum ipsum necessitatibus eligendi natus possimus autem consectetur tenetur, cumque aspernatur dignissimos, est alias vel numquam, accusantium omnis repudiandae laboriosam fugit ex aliquam corporis molestiae! Earum, nobis! Voluptatibus, distinctio saepe.
Voluptatem distinctio doloremque autem libero fugit praesentium neque cum? Vero, molestiae? Adipisci a voluptate, consectetur culpa, quos, reprehenderit sequi maiores cupiditate sit voluptatum distinctio obcaecati illo nesciunt. Iusto, reprehenderit eius.
Cumque vel delectus, tenetur nisi, cupiditate facilis recusandae, optio et voluptatibus voluptas quibusdam accusamus! Cupiditate, asperiores provident necessitatibus ipsa fugit repellendus laborum et dolor possimus fugiat non eaque aut iure.
Tempore earum possimus accusamus ut cum, ipsa odit velit? Quaerat doloribus quam, perspiciatis facere ullam vel, explicabo, voluptas esse minus nam aliquid nobis laudantium! Rerum eos dolor suscipit ratione aperiam.
Sed eaque exercitationem at repudiandae sunt quisquam dolor! Eveniet aliquid nam odio, aliquam, similique voluptates dolor quo non voluptatum sed mollitia, nobis ipsum doloremque enim eaque magnam odit laudantium atque.
Reprehenderit fuga molestiae facere reiciendis, magnam obcaecati itaque consectetur dolorem laborum? Natus distinctio, nemo repudiandae eos quae obcaecati sunt excepturi ut accusamus quam iure quis suscipit ducimus non! Officia, deleniti.
Libero nihil non voluptatem, dolore mollitia perferendis eligendi distinctio pariatur dolor repellendus quae eveniet sit quos alias voluptatum optio illo porro temporibus deserunt doloremque vitae impedit et aliquam minus. Excepturi?
Molestiae, aspernatur repudiandae quidem maiores mollitia laborum illum nisi nihil impedit nam doloremque voluptatem. Quo architecto doloribus, nisi non officiis, perferendis, vel ad maiores assumenda debitis quibusdam eligendi modi perspiciatis?
A dignissimos ullam natus laudantium hic ad, officiis atque maiores magni enim, ea voluptates numquam placeat? Nihil, id odit. Enim, beatae. Odio debitis itaque facere, expedita dicta adipisci possimus nisi.
Alias at aliquam sunt? Aperiam dolorum possimus ab quis nostrum assumenda velit, dignissimos optio dolor repellendus adipisci perspiciatis nihil eveniet numquam cupiditate sint laborum quisquam, ipsum eum magnam? Ipsum, dignissimos?
Fugit tempora a sequi enim perferendis minima itaque consequuntur harum explicabo quidem cum, ea officiis totam odit exercitationem temporibus hic iure, quae sunt aspernatur labore nulla earum. Expedita, eaque esse.
Iusto mollitia, eum rem necessitatibus in architecto sequi dolores maiores labore tempora aliquid optio harum quaerat vel quod recusandae sint aspernatur culpa ab. Nesciunt nemo consequatur adipisci officia pariatur at?
Est placeat voluptas porro architecto ipsum sit. Id inventore odio quia pariatur laboriosam aliquid totam sunt suscipit, incidunt illum ipsum laudantium quis corporis quaerat, accusantium commodi tempora asperiores, maxime facilis.
Rerum ducimus consequatur eos amet, consectetur voluptatem. Enim maxime cumque rerum ut sit fugiat temporibus expedita similique, iusto modi provident quisquam nam deleniti velit animi consequuntur repellendus corrupti, blanditiis neque?
Dolores vero nostrum praesentium adipisci quidem! Ad commodi necessitatibus nam dolorem enim, fuga eaque repudiandae quod ducimus, labore mollitia. Doloribus excepturi vitae quasi optio numquam itaque, exercitationem deleniti esse! Eos?
Soluta a odio incidunt corrupti illum. Amet possimus fugiat atque qui mollitia eum, reprehenderit aliquid ab ex sequi quos! Sint dolorem provident nihil nemo facere, officiis incidunt. Esse, illo voluptatum!
Velit atque, fugit ab dolor est dicta necessitatibus obcaecati vero recusandae inventore rerum saepe iure exercitationem numquam neque. Beatae atque necessitatibus nam facilis, qui eos ea a tempore harum nostrum.
Nulla rerum doloribus pariatur fugit necessitatibus libero explicabo molestias eum excepturi laboriosam quos dolores animi quasi dicta, maxime deserunt! Maiores veritatis cumque illo ad. Libero odio necessitatibus delectus dolorem corporis.
</p>
</div>
</div>
<div class="col">
<div class="col-inner">
<p class="p-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem voluptates suscipit vero perferendis, odio officiis doloribus quae voluptatum debitis sint reiciendis, expedita, saepe eligendi esse numquam! Odio aperiam quidem delectus?
Enim repellendus nemo dolorum culpa accusantium? At ab laborum harum quasi sunt impedit labore ullam. Saepe ut dolorum omnis, corrupti eveniet atque, illum nulla quia soluta error officiis consequuntur inventore!
Cupiditate, ipsum consectetur labore beatae quia adipisci dignissimos illum molestias, sed facere temporibus sint sit et neque. Animi dolores nemo pariatur dolor delectus assumenda temporibus, ratione dignissimos rem cum voluptas.
Libero aliquid laborum doloremque fuga impedit? Consequatur fuga ea, illo dolores sunt maiores laboriosam blanditiis, numquam quod dicta veniam sequi minima, vitae at! Accusantium maxime animi, iusto a impedit rem.
Necessitatibus ipsam accusantium esse quasi labore, modi veritatis! Dolorum corrupti quisquam fugit unde. Consequatur impedit a totam cum nulla deleniti at atque commodi et repellat! Exercitationem quisquam ducimus itaque accusantium?
Neque voluptate id quisquam deleniti voluptas distinctio veniam quasi ipsum nam, vitae, ipsa nihil. Voluptas quisquam vel eligendi consequuntur sit rerum rem a magni, dolorem quod cumque? Accusantium, neque assumenda!
Tempore dignissimos corporis, ratione nihil qui quod itaque facilis laudantium quasi impedit cumque facere ex debitis distinctio ab ipsa beatae enim ut libero. Voluptatum quibusdam soluta quo, voluptatem at a.
Natus explicabo alias, non vel veniam similique soluta enim porro corporis ea deleniti ipsam consectetur debitis inventore laboriosam omnis nihil labore, placeat eligendi? Excepturi quod in sit aut aliquid assumenda.
Architecto assumenda officiis nostrum beatae nam aliquam quisquam tenetur aut. Ipsa earum excepturi, beatae incidunt vero nostrum accusantium. Quam officiis facere eos consectetur fugiat fugit minima, et necessitatibus consequuntur dicta.
Illo modi asperiores incidunt porro voluptates eaque repellendus quis sunt quae nam adipisci, officiis corporis quo dignissimos minus, deserunt amet, nihil fugiat recusandae quibusdam doloribus expedita! Cumque expedita ullam consequatur.
Reprehenderit aperiam, aut nisi ipsa aliquid ipsum hic facilis! Cupiditate, quidem soluta. Facilis rerum, fugit illum laudantium, labore minima corrupti molestiae doloremque corporis itaque animi ullam reprehenderit odio iure? In.
Vero at delectus neque cumque totam, laboriosam ipsa temporibus id voluptates officia aliquam! Nulla, adipisci minima quisquam perferendis incidunt dolorem ab? Reiciendis dolorum expedita iusto! Consequuntur distinctio velit facilis dolorem.
Voluptatum ipsum necessitatibus eligendi natus possimus autem consectetur tenetur, cumque aspernatur dignissimos, est alias vel numquam, accusantium omnis repudiandae laboriosam fugit ex aliquam corporis molestiae! Earum, nobis! Voluptatibus, distinctio saepe.
Voluptatem distinctio doloremque autem libero fugit praesentium neque cum? Vero, molestiae? Adipisci a voluptate, consectetur culpa, quos, reprehenderit sequi maiores cupiditate sit voluptatum distinctio obcaecati illo nesciunt. Iusto, reprehenderit eius.
Cumque vel delectus, tenetur nisi, cupiditate facilis recusandae, optio et voluptatibus voluptas quibusdam accusamus! Cupiditate, asperiores provident necessitatibus ipsa fugit repellendus laborum et dolor possimus fugiat non eaque aut iure.
Tempore earum possimus accusamus ut cum, ipsa odit velit? Quaerat doloribus quam, perspiciatis facere ullam vel, explicabo, voluptas esse minus nam aliquid nobis laudantium! Rerum eos dolor suscipit ratione aperiam.
Sed eaque exercitationem at repudiandae sunt quisquam dolor! Eveniet aliquid nam odio, aliquam, similique voluptates dolor quo non voluptatum sed mollitia, nobis ipsum doloremque enim eaque magnam odit laudantium atque.
Reprehenderit fuga molestiae facere reiciendis, magnam obcaecati itaque consectetur dolorem laborum? Natus distinctio, nemo repudiandae eos quae obcaecati sunt excepturi ut accusamus quam iure quis suscipit ducimus non! Officia, deleniti.
Libero nihil non voluptatem, dolore mollitia perferendis eligendi distinctio pariatur dolor repellendus quae eveniet sit quos alias voluptatum optio illo porro temporibus deserunt doloremque vitae impedit et aliquam minus. Excepturi?
Molestiae, aspernatur repudiandae quidem maiores mollitia laborum illum nisi nihil impedit nam doloremque voluptatem. Quo architecto doloribus, nisi non officiis, perferendis, vel ad maiores assumenda debitis quibusdam eligendi modi perspiciatis?
A dignissimos ullam natus laudantium hic ad, officiis atque maiores magni enim, ea voluptates numquam placeat? Nihil, id odit. Enim, beatae. Odio debitis itaque facere, expedita dicta adipisci possimus nisi.
Alias at aliquam sunt? Aperiam dolorum possimus ab quis nostrum assumenda velit, dignissimos optio dolor repellendus adipisci perspiciatis nihil eveniet numquam cupiditate sint laborum quisquam, ipsum eum magnam? Ipsum, dignissimos?
Fugit tempora a sequi enim perferendis minima itaque consequuntur harum explicabo quidem cum, ea officiis totam odit exercitationem temporibus hic iure, quae sunt aspernatur labore nulla earum. Expedita, eaque esse.
Iusto mollitia, eum rem necessitatibus in architecto sequi dolores maiores labore tempora aliquid optio harum quaerat vel quod recusandae sint aspernatur culpa ab. Nesciunt nemo consequatur adipisci officia pariatur at?
Est placeat voluptas porro architecto ipsum sit. Id inventore odio quia pariatur laboriosam aliquid totam sunt suscipit, incidunt illum ipsum laudantium quis corporis quaerat, accusantium commodi tempora asperiores, maxime facilis.
Rerum ducimus consequatur eos amet, consectetur voluptatem. Enim maxime cumque rerum ut sit fugiat temporibus expedita similique, iusto modi provident quisquam nam deleniti velit animi consequuntur repellendus corrupti, blanditiis neque?
Dolores vero nostrum praesentium adipisci quidem! Ad commodi necessitatibus nam dolorem enim, fuga eaque repudiandae quod ducimus, labore mollitia. Doloribus excepturi vitae quasi optio numquam itaque, exercitationem deleniti esse! Eos?
Soluta a odio incidunt corrupti illum. Amet possimus fugiat atque qui mollitia eum, reprehenderit aliquid ab ex sequi quos! Sint dolorem provident nihil nemo facere, officiis incidunt. Esse, illo voluptatum!
Velit atque, fugit ab dolor est dicta necessitatibus obcaecati vero recusandae inventore rerum saepe iure exercitationem numquam neque. Beatae atque necessitatibus nam facilis, qui eos ea a tempore harum nostrum.
Nulla rerum doloribus pariatur fugit necessitatibus libero explicabo molestias eum excepturi laboriosam quos dolores animi quasi dicta, maxime deserunt! Maiores veritatis cumque illo ad. Libero odio necessitatibus delectus dolorem corporis.
</p>
</div>
</div>
</div>
</div>
</div>
Basically my Html and css is like this:
*{
margin: 0;
padding: 0;
border: none;
font-size: 20px;
}
html {
height: 100%;
background: #333;
border: 10px solid green;
}
body {
background:steelblue;
color: black;
min-height: 100%;
border: 10px solid red;
}
.div1{
background-image: url("a.jpg");
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="ab.css">
</head>
<body>
<div class="div1">
<h1>Ankit</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam porro vero consequatur laborum a repudiandae rerum
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni recusandae quia enim. Minus pariatur, magni,
officiis autem fuga illo blanditiis adipisci odio, et explicabo eveniet aliquam nesciunt minima debitis dolorum
laboriosam laborum praesentium assumenda dicta nemo tempora? Temporibus dolore labore quia eaque inventore, earum
voluptate. Commodi aut voluptas perferendis fugiat placeat rem, alias iusto natus nam, exercitationem porro a
reprehenderit ab officiis asperiores facilis eveniet inventore, sit perspiciatis blanditiis! Pariatur reiciendis
magnam modi maiores voluptatem omnis quia! Quisquam sed autem illum natus sapiente quos quidem, rerum numquam
sit necessitatibus nostrum atque officia sunt animi. Temporibus iure, laudantium dolor explicabo illo, dignissimos
placeat tenetur nesciunt ipsam libero, aperiam corrupti doloribus officia. Ipsam odio, sapiente nisi ducimus
voluptatum ex blanditiis corrupti, dolores ratione, quasi neque suscipit vel aperiam fugit magnam. Magni perspiciatis
rem praesentium adipisci dolorum reprehenderit, corporis sapiente nulla. Delectus accusantium velit ut aspernatur
nisi impedit iure corporis repellendus tempora a? Nobis, quam sapiente est pariatur, ipsa voluptatum expedita
rem eaque accusantium tenetur iste voluptatibus dicta beatae sed illo explicabo excepturi cumque eius delectus
consequatur non praesentium dolores corporis? Impedit deleniti alias explicabo consequuntur dolor quisquam debitis
facilis cumque natus soluta omnis quod nobis, placeat repellat cupiditate! Vero adipisci nostrum recusandae quo
dolorem odit expedita, repudiandae, placeat temporibus quod autem excepturi distinctio perspiciatis, illo eius
magni beatae. Natus fugit esse sunt id cumque blanditiis numquam aperiam. Quidem voluptates neque blanditiis
sequi quaerat est sint hic sunt, impedit nesciunt consequatur id ipsam nemo in eveniet? Iure voluptatem, inventore
dolores, nam asperiores possimus commodi quos laborum quidem quasi, sunt libero exercitationem. Iste, enim distinctio!
Voluptas dicta blanditiis ad ipsa voluptates laudantium, inventore qui, est accusamus impedit officia fuga rerum.
Repellat eaque aliquid ipsam impedit deleniti atque, consequuntur dicta molestiae. Deleniti corrupti ipsum sapiente,
sunt at perferendis suscipit tempore a amet officia aut ea pariatur dolores non? Cupiditate repellendus corporis
sit ex optio soluta quas ea cumque ab delectus quae ipsum at, quisquam numquam, nobis sapiente temporibus cum
exercitationem placeat laudantium eveniet enim architecto. Ipsum error quisquam dignissimos voluptatem fugiat
ipsa cupiditate exercitationem consequatur distinctio? Obcaecati sint atque facere veniam iusto repellendus natus
nobis, commodi cumque ducimus est voluptate, laudantium, perferendis repudiandae voluptates reiciendis. Nisi
dolorem saepe eaque amet vel ex pariatur ab non autem ut nihil ipsam enim hic reprehenderit voluptatum quae tenetur,
deleniti alias qui nostrum? Praesentium error hic repellendus officia, distinctio eveniet eos quibusdam in obcaecati
eius asperiores consectetur quasi, libero, eaque voluptatibus dolor incidunt. Nemo magnam eveniet sit animi fugit
quas temporibus beatae veniam, aliquam sed voluptas placeat hic qui fugiat illo, omnis totam? Iure voluptatum
ut, quaerat, nihil inventore doloribus laboriosam expedita, mollitia dolor sequi veniam recusandae aperiam nobis
illum! A quae ut eos itaque quibusdam magni, non nulla odit voluptatibus dolores exercitationem quidem! Velit
quis sed autem dolorum sunt itaque, veniam obcaecati quasi architecto culpa? Id ducimus rem iusto optio. Modi
dolores ad cumque exercitationem, sapiente asperiores in accusantium maxime dicta, earum iste nam consequatur
excepturi dolorum neque hic necessitatibus, deleniti dolor. Magni dicta excepturi porro repellendus iure blanditiis,
deserunt voluptas necessitatibus provident debitis doloribus nulla, quo vitae vel, minus dolorum repellat harum
dolorem deleniti explicabo libero. Ea, atque molestias autem quibusdam placeat fugiat temporibus minima neque.
Nostrum dolore laudantium eaque! Eligendi rerum ut, at laudantium nesciunt debitis in! Adipisci dicta veniam
alias error vitae exercitationem quibusdam sequi rem nihil quisquam explicabo qui cum saepe voluptate pariatur,
quos tium dolore, et tempora sequi atque doloremque eius adipisci
qui nisi iure facilis voluptatibus accusamus asperiores aspernatur? Molestiae laudantium tenetur laboriosam perspiciatis
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis debitis expedita quam tempora cumque voluptas
explicabo assumenda ipsa deserunt ut exercitationem ratione cum porro quidem deleniti accusamus in rem, quos
incidunt temporibus, sed animi rerum atque distinctio! Sed, ullam possimus. Iste magni, sit error perspiciatis
quidem omnis eveniet doloremque, laboriosam ducimus sequi voluptates labore aliquid harum reprehenderit alias
itaque cupiditate dolor dolorum quibusdam tenetur molestiae quos id nisi. Ut perspiciatis explicabo obcaecati
ducimus cupiditate. Iure ad praesentium nesciunt culpa dicta quaerat aspernatur in! Ipsum aspernatur cum sequi
ab blanditiis doloremque consequatur quod quis eum deleniti voluptatem voluptates amet, error, itaque dolore
numquam repellat laboriosam hic ex quibusdam totam, vitae maiores! Accusamus sunt, tempora recusandae eaque similique
nihil consequatur quasi incidunt quo iusto! Voluptatibus, praesentium. Et obcaecati, quod excepturi quae nam
recusandae magnam! Ipsa accusamus molestiae quasi! Assumenda perspiciatis quod et fuga nihil sed, ipsa deleniti
tenetur magni iusto! Cum quod repudiandae nemo excepturi earum deleniti delectus iure exercitationem eaque voluptatum
vitae vetio blanditiis incidunt, aliquid consectetur dicta necessitatibus id! Natus,
laudantium? Dolor aliquid exercitationem sapiente inventore non ipsam et, nisi nulla molestias optio blanditiis
consectetur fugit. Beatae molestias iste necessitatibus mollitia quidem corporis tempore? Soluta vitae qui ullam
culpa in deserunt exercitationem ipsa illum eius, rem omnis ipsum numquam vel temporibus atque dolor cum, velit
nulla officia perferendis alias optio? Excepturi earum, reiciendis modi velit deleniti placeat sint, aspernatur
ducimus corporis magnam amet quibusdam, eveniet ea voluptatum laboriosam dignissimos repellat voluptatem ullam
fugiat ipsum. Consequuntur, blanditiis! Facere placeat earum nostrum iste neque iure. Laborum architecto tempora
assumenda corporis ut, doloribus, commodi voluptates soluta cumque officia itaque asperiores fugit, harum numquam
animi eveniet culpa explicabo adipisci debitis nihil suscipit. Illum, debitis totam. Recusandae iusto nam dignissimos
vitae nisi fuga laboriosam nobis ipsa doloremque natus iure possimus, culpa quia cupiditate laudantium eius tenetur.
Incidunt suscipit, sit asperiores voluptates facilis illum, veritatis autem vero beatae laborum, alias tenetur.
Illo possimus pariatur molestias quia optio quis reprehenderit architecto exercitationem distinctio veritatis
esse, enim culpa, laborum ducimus blanditiis! Aliquam deserunt eligendi ipsa dolorum facere officiis quasi perferendis
amet doloremque nisi nobis reprehenderit, dolorem aperiam, harum aliquid. Unde aliquam, possimus sit et adipisci,
aperiam debitis sed asperiores porro facilis veniam dicta? Fugit voluptates repellendus ex alias, architecto
eos. Molestiae eveniet sunt culpa ex exercitationem eligendi deleniti dignissimos quia, aliquid eum nostrum amet
expedita aperiam qui dolorem rem doloribus, esse sit? Officia, labore. Assumenda ipsa rem possimus? Vel nostrum
dignissimos beatae accusantium laborum, unde omnis rem deleniti quidem possimus. Saepe a assumenda iure aliquid
deleniti omnis odio, quas esse deserunt officia consectetur sequi dolorum, ut magni! Doloribus eaque commodi
perferendis minus et rerum? Numquam necessitatibus dolore iste possimus cupiditate velit, corrupti at eum, ducimus
laboriosam provident assumenda voluptatum inventore? Facilis ipsam nihil consequuntur assumenda officia cum nobis
inventore? Et voluptates dolor nisi deleniti suscipit praesentium. Illum voluptatem perspiciatis placeat aperiam
fuga laborum corrupti, ipsa aut, perferendis labore ea rem atque recusandae tenetur quaerat dicta quasi totam
officiis nisi ipsum accusantium corporis. Rem voluptatum neque atque, distinctio est placeat iure quae sed accusantium
modi quia iste aperiam. Quisquam voluptates magnam, odio eius nisi doloremque error officia asperiores ipsam
laudantium voluptatibus, culpa voluptate quae esse excepturi nemo adipisci sapiente, ullam aspernatur. Eos, dolores
dolorum. Voluptates eaque obcaecati, corporis officia omnis aliquam, itaque illum laborum assumenda iusto sapiente
veritatis praesentium autem adipisci quibusdam? Alias voluptatibus officia ullam voluptatem consequatur accusamus
ut similique laboriosam ratione, accusantium vitae eaque ab? Sequi excepturi modi repellendus voluptatum error
consequuntur ex quam, ipsa in hic similique placeat explicabo nisi dicta esse quod molestias maxime magnam! Eos
ipsum error debitis odio animi, excepturi voluptas tempora ratione hic nihil. Officia aperiam, ipsum voluptatem,
quibusdam illum officiis odio nam recusandae illo reprehenderit itaque maiores similique ex libero veniam praesentium
quasi. Quaerat impedit in enim et quisquam at voluptas magni vitae quasi nemo non temporibus saepe facilis accusamus,
ullam aliquam quibusdam, adipisci ipsum. Quam, adipisci obcaecati repellendus neque sint aliquam in iure, magnam
aperiam itaque perferendis suscipit vel alias enim dolore. Dolorum ipsa officiis voluptatibus repellat, qui dolore
incidunt eligendi, dicta natus dignissimos perspiciatis deleniti aspernatur voluptate quos eos! Vitae at placeat
iste a deserunt quisquam dolorum! Tempora, exercitationem, laborum reprehenderit, odit minima veniam suscipit
voluptas rem nobis saepe ipsa modi alias hic provident animi atque ab ratione odio a porro eaque distinctio cum
omnis? Nihil odio distinctio animi minus ducimus necessitatibus tenetur accusantium dolor eaque! Est repellendus,
laboriosam nostrum ducimus ipsam minima delectus voluptatibus aliquam temporibus nisi qui? Porro eius vero labore
pariatur molestiae fugit fugiat aliquam nulla soluta illum quod hic beatae laudantium, asperiores laborum repellendus
quaerat suscipit ipsam nemo perferendis praesentium debitis eligendi consequuntur atque. Reprehenderit laudantium
quod veniam praesentium rem? Maxime sapiente consequatur alias ducimus nam quis dignissimos, accusantium commodi!</p>
</div>
</body>
</html>
`What I want to ask is
1- Why isn't the body wrapping around the content as the min-height is set to 100% and this works if the content is directly inside the body or if there is no image background with limited height(100vh),an explanation will help a lot(By wrapping i mean that the borders of the body are same as the height of image background and the body is not adjusting itself according to the overflowing content)?
2- As the body and html are only upto the size of the first page or viewport (as the both borders are ending midway) why the html background color is still applicable over the rest of the content?
3-and if you comment out the background of the html then the background of body will apply to the overflowing content
Thank you for your patience
The html and body are wrapping around the div, which has a set height, and not the content. Setting the div to min-height and the html to min-height made it wrap around the content.
*{
margin: 0;
padding: 0;
border: none;
font-size: 20px;
}
html {
min-height: 100%;
background: #333;
border: 10px solid green;
}
body {
background:steelblue;
color: black;
min-height: 100%;
border: 10px solid red;
}
.div1{
background-image: url("a.jpg");
min-height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="ab.css">
</head>
<body>
<div class="div1">
<h1>Ankit</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam porro vero consequatur laborum a repudiandae rerum
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni recusandae quia enim. Minus pariatur, magni,
officiis autem fuga illo blanditiis adipisci odio, et explicabo eveniet aliquam nesciunt minima debitis dolorum
laboriosam laborum praesentium assumenda dicta nemo tempora? Temporibus dolore labore quia eaque inventore, earum
voluptate. Commodi aut voluptas perferendis fugiat placeat rem, alias iusto natus nam, exercitationem porro a
reprehenderit ab officiis asperiores facilis eveniet inventore, sit perspiciatis blanditiis! Pariatur reiciendis
magnam modi maiores voluptatem omnis quia! Quisquam sed autem illum natus sapiente quos quidem, rerum numquam
sit necessitatibus nostrum atque officia sunt animi. Temporibus iure, laudantium dolor explicabo illo, dignissimos
placeat tenetur nesciunt ipsam libero, aperiam corrupti doloribus officia. Ipsam odio, sapiente nisi ducimus
voluptatum ex blanditiis corrupti, dolores ratione, quasi neque suscipit vel aperiam fugit magnam. Magni perspiciatis
rem praesentium adipisci dolorum reprehenderit, corporis sapiente nulla. Delectus accusantium velit ut aspernatur
nisi impedit iure corporis repellendus tempora a? Nobis, quam sapiente est pariatur, ipsa voluptatum expedita
rem eaque accusantium tenetur iste voluptatibus dicta beatae sed illo explicabo excepturi cumque eius delectus
consequatur non praesentium dolores corporis? Impedit deleniti alias explicabo consequuntur dolor quisquam debitis
facilis cumque natus soluta omnis quod nobis, placeat repellat cupiditate! Vero adipisci nostrum recusandae quo
dolorem odit expedita, repudiandae, placeat temporibus quod autem excepturi distinctio perspiciatis, illo eius
magni beatae. Natus fugit esse sunt id cumque blanditiis numquam aperiam. Quidem voluptates neque blanditiis
sequi quaerat est sint hic sunt, impedit nesciunt consequatur id ipsam nemo in eveniet? Iure voluptatem, inventore
dolores, nam asperiores possimus commodi quos laborum quidem quasi, sunt libero exercitationem. Iste, enim distinctio!
Voluptas dicta blanditiis ad ipsa voluptates laudantium, inventore qui, est accusamus impedit officia fuga rerum.
Repellat eaque aliquid ipsam impedit deleniti atque, consequuntur dicta molestiae. Deleniti corrupti ipsum sapiente,
sunt at perferendis suscipit tempore a amet officia aut ea pariatur dolores non? Cupiditate repellendus corporis
sit ex optio soluta quas ea cumque ab delectus quae ipsum at, quisquam numquam, nobis sapiente temporibus cum
exercitationem placeat laudantium eveniet enim architecto. Ipsum error quisquam dignissimos voluptatem fugiat
ipsa cupiditate exercitationem consequatur distinctio? Obcaecati sint atque facere veniam iusto repellendus natus
nobis, commodi cumque ducimus est voluptate, laudantium, perferendis repudiandae voluptates reiciendis. Nisi
dolorem saepe eaque amet vel ex pariatur ab non autem ut nihil ipsam enim hic reprehenderit voluptatum quae tenetur,
deleniti alias qui nostrum? Praesentium error hic repellendus officia, distinctio eveniet eos quibusdam in obcaecati
eius asperiores consectetur quasi, libero, eaque voluptatibus dolor incidunt. Nemo magnam eveniet sit animi fugit
quas temporibus beatae veniam, aliquam sed voluptas placeat hic qui fugiat illo, omnis totam? Iure voluptatum
ut, quaerat, nihil inventore doloribus laboriosam expedita, mollitia dolor sequi veniam recusandae aperiam nobis
illum! A quae ut eos itaque quibusdam magni, non nulla odit voluptatibus dolores exercitationem quidem! Velit
quis sed autem dolorum sunt itaque, veniam obcaecati quasi architecto culpa? Id ducimus rem iusto optio. Modi
dolores ad cumque exercitationem, sapiente asperiores in accusantium maxime dicta, earum iste nam consequatur
excepturi dolorum neque hic necessitatibus, deleniti dolor. Magni dicta excepturi porro repellendus iure blanditiis,
deserunt voluptas necessitatibus provident debitis doloribus nulla, quo vitae vel, minus dolorum repellat harum
dolorem deleniti explicabo libero. Ea, atque molestias autem quibusdam placeat fugiat temporibus minima neque.
Nostrum dolore laudantium eaque! Eligendi rerum ut, at laudantium nesciunt debitis in! Adipisci dicta veniam
alias error vitae exercitationem quibusdam sequi rem nihil quisquam explicabo qui cum saepe voluptate pariatur,
quos tium dolore, et tempora sequi atque doloremque eius adipisci
qui nisi iure facilis voluptatibus accusamus asperiores aspernatur? Molestiae laudantium tenetur laboriosam perspiciatis
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis debitis expedita quam tempora cumque voluptas
explicabo assumenda ipsa deserunt ut exercitationem ratione cum porro quidem deleniti accusamus in rem, quos
incidunt temporibus, sed animi rerum atque distinctio! Sed, ullam possimus. Iste magni, sit error perspiciatis
quidem omnis eveniet doloremque, laboriosam ducimus sequi voluptates labore aliquid harum reprehenderit alias
itaque cupiditate dolor dolorum quibusdam tenetur molestiae quos id nisi. Ut perspiciatis explicabo obcaecati
ducimus cupiditate. Iure ad praesentium nesciunt culpa dicta quaerat aspernatur in! Ipsum aspernatur cum sequi
ab blanditiis doloremque consequatur quod quis eum deleniti voluptatem voluptates amet, error, itaque dolore
numquam repellat laboriosam hic ex quibusdam totam, vitae maiores! Accusamus sunt, tempora recusandae eaque similique
nihil consequatur quasi incidunt quo iusto! Voluptatibus, praesentium. Et obcaecati, quod excepturi quae nam
recusandae magnam! Ipsa accusamus molestiae quasi! Assumenda perspiciatis quod et fuga nihil sed, ipsa deleniti
tenetur magni iusto! Cum quod repudiandae nemo excepturi earum deleniti delectus iure exercitationem eaque voluptatum
vitae vetio blanditiis incidunt, aliquid consectetur dicta necessitatibus id! Natus,
laudantium? Dolor aliquid exercitationem sapiente inventore non ipsam et, nisi nulla molestias optio blanditiis
consectetur fugit. Beatae molestias iste necessitatibus mollitia quidem corporis tempore? Soluta vitae qui ullam
culpa in deserunt exercitationem ipsa illum eius, rem omnis ipsum numquam vel temporibus atque dolor cum, velit
nulla officia perferendis alias optio? Excepturi earum, reiciendis modi velit deleniti placeat sint, aspernatur
ducimus corporis magnam amet quibusdam, eveniet ea voluptatum laboriosam dignissimos repellat voluptatem ullam
fugiat ipsum. Consequuntur, blanditiis! Facere placeat earum nostrum iste neque iure. Laborum architecto tempora
assumenda corporis ut, doloribus, commodi voluptates soluta cumque officia itaque asperiores fugit, harum numquam
animi eveniet culpa explicabo adipisci debitis nihil suscipit. Illum, debitis totam. Recusandae iusto nam dignissimos
vitae nisi fuga laboriosam nobis ipsa doloremque natus iure possimus, culpa quia cupiditate laudantium eius tenetur.
Incidunt suscipit, sit asperiores voluptates facilis illum, veritatis autem vero beatae laborum, alias tenetur.
Illo possimus pariatur molestias quia optio quis reprehenderit architecto exercitationem distinctio veritatis
esse, enim culpa, laborum ducimus blanditiis! Aliquam deserunt eligendi ipsa dolorum facere officiis quasi perferendis
amet doloremque nisi nobis reprehenderit, dolorem aperiam, harum aliquid. Unde aliquam, possimus sit et adipisci,
aperiam debitis sed asperiores porro facilis veniam dicta? Fugit voluptates repellendus ex alias, architecto
eos. Molestiae eveniet sunt culpa ex exercitationem eligendi deleniti dignissimos quia, aliquid eum nostrum amet
expedita aperiam qui dolorem rem doloribus, esse sit? Officia, labore. Assumenda ipsa rem possimus? Vel nostrum
dignissimos beatae accusantium laborum, unde omnis rem deleniti quidem possimus. Saepe a assumenda iure aliquid
deleniti omnis odio, quas esse deserunt officia consectetur sequi dolorum, ut magni! Doloribus eaque commodi
perferendis minus et rerum? Numquam necessitatibus dolore iste possimus cupiditate velit, corrupti at eum, ducimus
laboriosam provident assumenda voluptatum inventore? Facilis ipsam nihil consequuntur assumenda officia cum nobis
inventore? Et voluptates dolor nisi deleniti suscipit praesentium. Illum voluptatem perspiciatis placeat aperiam
fuga laborum corrupti, ipsa aut, perferendis labore ea rem atque recusandae tenetur quaerat dicta quasi totam
officiis nisi ipsum accusantium corporis. Rem voluptatum neque atque, distinctio est placeat iure quae sed accusantium
modi quia iste aperiam. Quisquam voluptates magnam, odio eius nisi doloremque error officia asperiores ipsam
laudantium voluptatibus, culpa voluptate quae esse excepturi nemo adipisci sapiente, ullam aspernatur. Eos, dolores
dolorum. Voluptates eaque obcaecati, corporis officia omnis aliquam, itaque illum laborum assumenda iusto sapiente
veritatis praesentium autem adipisci quibusdam? Alias voluptatibus officia ullam voluptatem consequatur accusamus
ut similique laboriosam ratione, accusantium vitae eaque ab? Sequi excepturi modi repellendus voluptatum error
consequuntur ex quam, ipsa in hic similique placeat explicabo nisi dicta esse quod molestias maxime magnam! Eos
ipsum error debitis odio animi, excepturi voluptas tempora ratione hic nihil. Officia aperiam, ipsum voluptatem,
quibusdam illum officiis odio nam recusandae illo reprehenderit itaque maiores similique ex libero veniam praesentium
quasi. Quaerat impedit in enim et quisquam at voluptas magni vitae quasi nemo non temporibus saepe facilis accusamus,
ullam aliquam quibusdam, adipisci ipsum. Quam, adipisci obcaecati repellendus neque sint aliquam in iure, magnam
aperiam itaque perferendis suscipit vel alias enim dolore. Dolorum ipsa officiis voluptatibus repellat, qui dolore
incidunt eligendi, dicta natus dignissimos perspiciatis deleniti aspernatur voluptate quos eos! Vitae at placeat
iste a deserunt quisquam dolorum! Tempora, exercitationem, laborum reprehenderit, odit minima veniam suscipit
voluptas rem nobis saepe ipsa modi alias hic provident animi atque ab ratione odio a porro eaque distinctio cum
omnis? Nihil odio distinctio animi minus ducimus necessitatibus tenetur accusantium dolor eaque! Est repellendus,
laboriosam nostrum ducimus ipsam minima delectus voluptatibus aliquam temporibus nisi qui? Porro eius vero labore
pariatur molestiae fugit fugiat aliquam nulla soluta illum quod hic beatae laudantium, asperiores laborum repellendus
quaerat suscipit ipsam nemo perferendis praesentium debitis eligendi consequuntur atque. Reprehenderit laudantium
quod veniam praesentium rem? Maxime sapiente consequatur alias ducimus nam quis dignissimos, accusantium commodi!</p>
</div>
</body>
</html>
That's three questions; you should really make it three separate posts next time. But OK.
The div has a height of 100vh, so the body doesn't grow larger than that; why should it?
The html has a grey background; when you scroll, you scroll the body, not the html. So what you see below the bottom border of the body is the (static) background of the html.
For some properties, if the html doesn't have them specified, it takes them from the body. So the html gets the body background in this case. Same for margins.
This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Allowing for overflow on the y-axis while hiding overflow on the x-axis [duplicate]
(1 answer)
Closed 5 years ago.
There is an element having fixed height on my DOM with height more than body and html document and page is scrollable but its impacting my content. If you disable overflow-x either on html or body, it will work fine. Not able to figure out how overflow-x is impacting overflow-y condition.
As per below code snippet, the content of second column is hidden half way due to oveflow-x property on html or body.
Using below css on page.
body, html{
overflow-x: hidden;
height: 100%;
}
canvas {
background: #000;
display: block !important;
border: 0;
margin: 0;
width: 100% !important;
height: 100% !important;
padding: 0;
max-width: 100% !important;
max-height: 100% !important;
}
body, html{
height: 100%;
overflow-x: hidden;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="height:100%; margin: 0; padding: 0; ">
<div class="row">
<div class="col col-xs-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus atque iusto laboriosam perspiciatis praesentium. Aliquam at atque beatae blanditiis consequuntur delectus earum eius eveniet excepturi fuga fugit hic id illo laboriosam natus nobis non
omnis, pariatur praesentium quidem repudiandae sapiente ullam ut vel veritatis voluptas voluptatibus. A asperiores at consequatur culpa dolorem eaque eligendi exercitationem facere fuga fugiat fugit, hic in inventore iure minima necessitatibus
nisi non, numquam officiis praesentium quas quis reiciendis rerum voluptatibus voluptatum. Animi debitis eveniet maxime nostrum temporibus! Alias, aliquam amet animi at blanditiis consectetur corporis culpa dolor dolore doloremque ea earum exercitationem
facere harum, hic illo in itaque labore laborum libero natus nemo obcaecati optio quas rem repellendus vitae? At deleniti dignissimos id in magnam nisi nulla omnis, perferendis, quis reprehenderit sint, voluptatibus. Cum ducimus hic impedit magni
modi necessitatibus nihil quibusdam tenetur ullam vitae. Facilis illum inventore mollitia nihil non omnis reprehenderit unde? Accusantium animi aspernatur, dolorum, earum expedita illum iusto obcaecati, officia provident qui unde ut. Accusantium
aperiam at atque consequatur culpa deleniti dicta dolorum explicabo fuga fugiat, hic id laborum minus molestiae nobis pariatur repellat rerum saepe sed sint soluta temporibus voluptates voluptatum. Ab, possimus, soluta. A accusantium asperiores
cumque cupiditate deleniti deserunt distinctio dolor ducimus ea eius eos id iure labore laboriosam laborum, magnam magni molestiae non nostrum officia quia quibusdam quidem suscipit ut vel velit veritatis vitae? Facere facilis laboriosam optio
perspiciatis quidem quod reprehenderit similique, sunt tempora voluptas. Ad animi cupiditate deleniti dolore dolorem earum est harum itaque iusto laborum magnam nostrum numquam odit provident quod quos, ratione recusandae saepe sequi similique
tenetur totam ullam. Commodi ipsum nisi obcaecati porro praesentium. Accusantium ad adipisci alias asperiores, aspernatur consequatur consequuntur deserunt dicta dignissimos dolore dolorem doloremque, error eveniet fugiat laboriosam laborum magnam,
molestiae optio pariatur quis quo rem sint voluptatem?
</div>
<div class="col col-xs-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores minima natus nostrum numquam odit quaerat, ratione sed sit. Architecto, aspernatur autem dolor doloribus eveniet explicabo perspiciatis quam quidem quos! At blanditiis consequatur consequuntur
deleniti dignissimos dolorem dolorum eius explicabo fugiat illo in ipsa necessitatibus nostrum omnis quis quisquam quod quos ratione repellat sed sint temporibus, voluptates. Amet, animi architecto aut, deleniti deserunt dolores et expedita iusto
libero magnam magni, perspiciatis possimus quos recusandae repudiandae sapiente sit voluptatem. Accusamus aliquam architecto asperiores aut, delectus deleniti eaque eum fugit harum incidunt maxime molestiae quidem quod voluptatem voluptates. Accusamus
alias aliquam amet architecto assumenda atque commodi cumque deserunt dicta ducimus, esse harum ipsum itaque iusto labore laboriosam magnam magni maiores minus neque nisi officiis, omnis optio possimus provident quaerat quam quasi quo recusandae
reiciendis repellat sapiente sequi sunt tenetur vel voluptates voluptatum! A adipisci, assumenda aut cumque dicta doloribus eos ex harum iste magni minus mollitia odit officiis repudiandae similique ullam ut velit voluptate. Amet architecto id
nobis similique! Amet atque deleniti magnam quam quisquam, unde vel veritatis? Commodi laborum, maiores minus molestiae placeat quaerat sequi vero. Ab accusantium autem consequuntur deleniti dicta doloribus et facilis harum impedit in, incidunt
nam neque, nobis nostrum numquam quam quasi quia soluta, voluptate voluptates? Accusamus aut magnam minima officia voluptatum? A ab aliquam aut beatae consequatur debitis dignissimos dolor doloribus eaque earum eius enim eos exercitationem expedita
hic inventore ipsum itaque maxime nisi non obcaecati officia officiis perferendis praesentium quas repellat repellendus, similique unde, vel voluptate? Accusantium aliquam aliquid assumenda atque aut beatae debitis dicta, dolores doloribus ducimus
earum, eligendi exercitationem id impedit inventore laborum laudantium libero minima minus molestias nemo nostrum numquam obcaecati odit officia praesentium quasi quis reiciendis repellendus reprehenderit, rerum similique soluta temporibus? Ad
architecto aspernatur assumenda consectetur cupiditate debitis dolores doloribus enim error excepturi explicabo facere facilis fugiat id, illo ipsum laboriosam odio, porro quae quaerat quam quas quasi quisquam quod sint ut voluptatem? Animi architecto
cupiditate debitis dicta doloribus dolorum eaque earum eum expedita, fugiat harum illo iusto laboriosam laborum minima, molestiae natus pariatur perferendis perspiciatis praesentium quia quidem reiciendis reprehenderit sequi soluta suscipit tempora
vero? Ducimus exercitationem expedita explicabo facilis fugiat in ipsam iste iusto laudantium magnam natus optio, quod ratione rem, sed. Aspernatur assumenda facere libero obcaecati officiis pariatur provident quam quos repudiandae! Eveniet provident,
quo. Ab aliquid amet animi commodi corporis, cupiditate debitis dolor doloremque est ex fugiat id illum ipsam ipsum iste iure iusto laboriosam modi molestiae mollitia nam nisi nostrum nulla omnis placeat praesentium quas quia quibusdam quo quod
quos ratione repellat, sit tempora tempore veritatis voluptates. Ab accusantium aperiam, asperiores aut beatae cumque cupiditate delectus dolore eaque enim, libero minima, nemo nesciunt nulla qui quis ratione rem reprehenderit sapiente sed tempora
temporibus ut. Delectus, laudantium nam necessitatibus non pariatur quae. Aut culpa debitis explicabo facilis ipsam nam rem repellendus. Adipisci aliquam aut autem debitis deserunt distinctio dolore ducimus eaque expedita in ipsum libero nesciunt,
odit, officia perspiciatis, ratione recusandae reiciendis rem tempore temporibus totam voluptas.
</div>
</div>
<div>
<div style="z-index: 2147483642; top: 0px; left: 0px; position: absolute; opacity: 0.3;
width: 100vw; height: 10351px; display: block;">
<canvas width="100vw" height="10351" style="position: absolute; top: 0px; left: 0px; z-index: 1000000;"></canvas>
</div>
</div>
</div>
</body>
</html>
Note: I am looking for explanation of this issue (as why this is happening so that I can learn for future) not the fix of the issue. (by hit and trial different css fields).
I think there is no need to give overflow-x: hidden to the html, please have a look at the code.
canvas {
background: #000;
display: block !important;
border: 0;
margin: 0;
width: 100% !important;
height: 100% !important;
padding: 0;
max-width: 100% !important;
max-height: 100% !important;
}
body{
height: 100%;
overflow-x: hidden;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="height:100%; margin: 0; padding: 0; ">
<div class="row">
<div class="col col-xs-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus atque iusto laboriosam perspiciatis praesentium. Aliquam at atque beatae blanditiis consequuntur delectus earum eius eveniet excepturi fuga fugit hic id illo laboriosam natus nobis non
omnis, pariatur praesentium quidem repudiandae sapiente ullam ut vel veritatis voluptas voluptatibus. A asperiores at consequatur culpa dolorem eaque eligendi exercitationem facere fuga fugiat fugit, hic in inventore iure minima necessitatibus
nisi non, numquam officiis praesentium quas quis reiciendis rerum voluptatibus voluptatum. Animi debitis eveniet maxime nostrum temporibus! Alias, aliquam amet animi at blanditiis consectetur corporis culpa dolor dolore doloremque ea earum exercitationem
facere harum, hic illo in itaque labore laborum libero natus nemo obcaecati optio quas rem repellendus vitae? At deleniti dignissimos id in magnam nisi nulla omnis, perferendis, quis reprehenderit sint, voluptatibus. Cum ducimus hic impedit magni
modi necessitatibus nihil quibusdam tenetur ullam vitae. Facilis illum inventore mollitia nihil non omnis reprehenderit unde? Accusantium animi aspernatur, dolorum, earum expedita illum iusto obcaecati, officia provident qui unde ut. Accusantium
aperiam at atque consequatur culpa deleniti dicta dolorum explicabo fuga fugiat, hic id laborum minus molestiae nobis pariatur repellat rerum saepe sed sint soluta temporibus voluptates voluptatum. Ab, possimus, soluta. A accusantium asperiores
cumque cupiditate deleniti deserunt distinctio dolor ducimus ea eius eos id iure labore laboriosam laborum, magnam magni molestiae non nostrum officia quia quibusdam quidem suscipit ut vel velit veritatis vitae? Facere facilis laboriosam optio
perspiciatis quidem quod reprehenderit similique, sunt tempora voluptas. Ad animi cupiditate deleniti dolore dolorem earum est harum itaque iusto laborum magnam nostrum numquam odit provident quod quos, ratione recusandae saepe sequi similique
tenetur totam ullam. Commodi ipsum nisi obcaecati porro praesentium. Accusantium ad adipisci alias asperiores, aspernatur consequatur consequuntur deserunt dicta dignissimos dolore dolorem doloremque, error eveniet fugiat laboriosam laborum magnam,
molestiae optio pariatur quis quo rem sint voluptatem?
</div>
<div class="col col-xs-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores minima natus nostrum numquam odit quaerat, ratione sed sit. Architecto, aspernatur autem dolor doloribus eveniet explicabo perspiciatis quam quidem quos! At blanditiis consequatur consequuntur
deleniti dignissimos dolorem dolorum eius explicabo fugiat illo in ipsa necessitatibus nostrum omnis quis quisquam quod quos ratione repellat sed sint temporibus, voluptates. Amet, animi architecto aut, deleniti deserunt dolores et expedita iusto
libero magnam magni, perspiciatis possimus quos recusandae repudiandae sapiente sit voluptatem. Accusamus aliquam architecto asperiores aut, delectus deleniti eaque eum fugit harum incidunt maxime molestiae quidem quod voluptatem voluptates. Accusamus
alias aliquam amet architecto assumenda atque commodi cumque deserunt dicta ducimus, esse harum ipsum itaque iusto labore laboriosam magnam magni maiores minus neque nisi officiis, omnis optio possimus provident quaerat quam quasi quo recusandae
reiciendis repellat sapiente sequi sunt tenetur vel voluptates voluptatum! A adipisci, assumenda aut cumque dicta doloribus eos ex harum iste magni minus mollitia odit officiis repudiandae similique ullam ut velit voluptate. Amet architecto id
nobis similique! Amet atque deleniti magnam quam quisquam, unde vel veritatis? Commodi laborum, maiores minus molestiae placeat quaerat sequi vero. Ab accusantium autem consequuntur deleniti dicta doloribus et facilis harum impedit in, incidunt
nam neque, nobis nostrum numquam quam quasi quia soluta, voluptate voluptates? Accusamus aut magnam minima officia voluptatum? A ab aliquam aut beatae consequatur debitis dignissimos dolor doloribus eaque earum eius enim eos exercitationem expedita
hic inventore ipsum itaque maxime nisi non obcaecati officia officiis perferendis praesentium quas repellat repellendus, similique unde, vel voluptate? Accusantium aliquam aliquid assumenda atque aut beatae debitis dicta, dolores doloribus ducimus
earum, eligendi exercitationem id impedit inventore laborum laudantium libero minima minus molestias nemo nostrum numquam obcaecati odit officia praesentium quasi quis reiciendis repellendus reprehenderit, rerum similique soluta temporibus? Ad
architecto aspernatur assumenda consectetur cupiditate debitis dolores doloribus enim error excepturi explicabo facere facilis fugiat id, illo ipsum laboriosam odio, porro quae quaerat quam quas quasi quisquam quod sint ut voluptatem? Animi architecto
cupiditate debitis dicta doloribus dolorum eaque earum eum expedita, fugiat harum illo iusto laboriosam laborum minima, molestiae natus pariatur perferendis perspiciatis praesentium quia quidem reiciendis reprehenderit sequi soluta suscipit tempora
vero? Ducimus exercitationem expedita explicabo facilis fugiat in ipsam iste iusto laudantium magnam natus optio, quod ratione rem, sed. Aspernatur assumenda facere libero obcaecati officiis pariatur provident quam quos repudiandae! Eveniet provident,
quo. Ab aliquid amet animi commodi corporis, cupiditate debitis dolor doloremque est ex fugiat id illum ipsam ipsum iste iure iusto laboriosam modi molestiae mollitia nam nisi nostrum nulla omnis placeat praesentium quas quia quibusdam quo quod
quos ratione repellat, sit tempora tempore veritatis voluptates. Ab accusantium aperiam, asperiores aut beatae cumque cupiditate delectus dolore eaque enim, libero minima, nemo nesciunt nulla qui quis ratione rem reprehenderit sapiente sed tempora
temporibus ut. Delectus, laudantium nam necessitatibus non pariatur quae. Aut culpa debitis explicabo facilis ipsam nam rem repellendus. Adipisci aliquam aut autem debitis deserunt distinctio dolore ducimus eaque expedita in ipsum libero nesciunt,
odit, officia perspiciatis, ratione recusandae reiciendis rem tempore temporibus totam voluptas.
</div>
</div>
<div>
<div style="z-index: 2147483642; top: 0px; left: 0px; position: absolute; opacity: 0.3;
width: 100vw; height: 10351px; display: block;">
<canvas width="100vw" height="10351" style="position: absolute; top: 0px; left: 0px; z-index: 1000000;"></canvas>
</div>
</div>
</div>
</body>
</html>
Whenever you set the height of the html and body elements by using css height: 100%; property, it'll tell the browser, "Ok, just get body element's height as your(browser's) viewport height!". You can see it clearly by using Chrome's inspect element tool and play with the browser window height. Every time you adjust the browser's window height, the pixel height of the body element will vary accordingly.
overflow-x: hidden; on the body and html tag is not the issue. basically, overflow-x: hidden; property will hide the verticle contents which exceeds the parent element's width but not the horizontal way. In this case, whatever the content exceeds the verticle width of the body or html will not be shown.
The actual problem was, as I guess, the height: 100%; property of the body and html tags. Consider removing that as bellow.
html, body {
/*height: 100%;*/
overflow-x: hidden;
}
This will secure you, I guess.
I have this HTML with target highlighter. I don't want the target highlight to outside the container. I know this is because of the height: 150px but without that the container headbutt the browser top window. How can I fix this?
/* offset target */
:target:before {
content: " ";
display: block;
height: 150px; /* fixed header height*/
margin-top: -150px; /* negative fixed header height */
}
/* animation */
:target {
animation-name: hght;
animation-duration: 4s;
}
#keyframes hght {
0% {background: transparent;}
10% {background: #fbfc76;}
80% {background: transparent;}
/* others */
a {
background-color: blue;
}
ul li{
list-style: none;
display: inline-block;
margin: 10px;
}
ul{
width: 100%;
right: 0;
background-color: rgba(0,255,0,.9);
padding-top: 80px;
padding-bottom: 10px;
position: fixed;
top: 0;
}
<ul>
<li>Sun</li>
<li>Mercury</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, sint minima quas illum impedit! Sunt expedita perferendis voluptatum assumenda error, numquam accusantium, voluptatibus commodi tempora consectetur velit consequatur placeat fugit quod qui minus repellat sint, eveniet architecto necessitatibus vel! Nam in sequi pariatur quasi amet hic autem natus dolorum alias explicabo architecto, nostrum cum quibusdam error, sapiente dicta, ab totam voluptatem est fugiat. Culpa labore architecto, sunt placeat modi quis unde temporibus quod voluptate tempore optio corporis distinctio repellat ab aliquam et non accusantium impedit dolores expedita, in cumque illum dolorum. Tenetur doloribus eligendi asperiores voluptates tempore, amet eum quaerat voluptatem illo cupiditate fuga magni omnis accusamus necessitatibus at consequatur odio maiores autem consequuntur culpa, repellat corrupti, qui repellendus quisquam. Sed maiores quis, facilis ab. Facere libero minus magni totam, impedit nihil excepturi vero, quos aliquam quae cupiditate eligendi distinctio doloribus odio consequatur, rerum deleniti ipsa id ad culpa cum dolorem. Quas autem iure, voluptatem rerum explicabo id optio rem sunt quam vel quidem illo aliquid, labore, nisi, molestias a in perspiciatis! Beatae deserunt quia odit officiis, optio reprehenderit necessitatibus eius culpa eveniet magni, minus, accusamus temporibus, repudiandae. Sit fugit expedita quia minus, beatae laboriosam omnis. Quos voluptas minus unde?</p>
<h4>Sun</h4>
<p id="sun">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae amet fugit, facere doloremque nemo, assumenda id corrupti, illo culpa laboriosam dolorum et explicabo omnis libero dicta placeat mollitia expedita nisi est. Impedit repellat sed ducimus dolore assumenda consectetur nobis? Illo vero, eos ratione deleniti suscipit officia excepturi numquam error. Consectetur dolorem, nostrum cum. Mollitia maxime vero ab, possimus accusamus tenetur nisi soluta. Tempore, nam eius necessitatibus molestiae quos dolor explicabo suscipit nesciunt beatae rem eaque modi, in accusantium error ex, placeat praesentium voluptate. Ea esse, debitis! Doloribus aspernatur ea possimus nemo tenetur officiis, vero explicabo porro magni illo! Maxime harum, ullam vel nemo praesentium adipisci laboriosam ad hic, provident non, impedit dolorem enim illum cupiditate ipsum tempora. Beatae fugit ratione cum hic numquam saepe magnam perferendis impedit optio exercitationem molestiae ducimus, aspernatur, ea obcaecati nisi quas veritatis voluptatum. Autem quae debitis nostrum consequatur. Nobis necessitatibus aliquam nisi, iste voluptates eligendi nihil libero cumque. Quibusdam iusto, ab distinctio aspernatur ea minima voluptatem autem ipsam maxime natus. Esse praesentium, laboriosam, adipisci voluptate et impedit expedita reprehenderit voluptatem suscipit cum delectus quam. Velit corrupti tenetur eum explicabo itaque delectus incidunt nulla? At sed enim veritatis. Eius corrupti explicabo quis enim modi illum voluptate laborum iure cupiditate ut fugiat numquam facere nostrum quia libero sunt asperiores, alias repellat, unde ducimus minima possimus. Neque mollitia odio eaque ipsum expedita impedit adipisci labore recusandae, doloremque nisi veniam, illo esse odit maiores deleniti perspiciatis dolore similique! Dicta similique itaque porro praesentium, voluptas nam sed ex dolore voluptatum nobis perferendis, dignissimos, iure doloremque, aut est libero neque maxime veritatis harum consequuntur explicabo delectus tenetur qui. Quam harum nesciunt debitis libero molestiae eius aliquid et tempore, magnam, odit animi itaque. Fugit, non assumenda expedita maxime aut earum molestias dolorem eveniet perferendis quisquam placeat adipisci, cum, nam, fuga quod. Placeat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ducimus totam ipsa sint velit at sequi corporis ipsam voluptatum tenetur aut, dolorum, sapiente nihil! Laudantium blanditiis doloremque porro cumque, nemo facere, vero illo nesciunt non ab repellendus ad temporibus, quis, provident odio amet. Dolorem, laboriosam quas officia. Et cumque sint molestias quas provident nostrum, dignissimos pariatur voluptas aliquid, repellendus consectetur recusandae iusto, earum iure ducimus enim similique quibusdam autem natus! Incidunt, sunt illum error. Autem asperiores molestias iure, recusandae voluptas tenetur accusantium iste, molestiae provident quibusdam dolore facilis cupiditate rerum, cumque corporis alias maiores, est ab. Quae eaque veritatis quia quasi error a provident pariatur, rerum molestiae magnam expedita autem quidem! Perferendis aut beatae, cumque fugit natus quidem quia facere magni aperiam accusantium. Neque cumque quis vel aut quas ipsam numquam fugit possimus facere ut! Ut error voluptatibus neque doloribus consequuntur at voluptates! Eaque perspiciatis, quas, sit facere praesentium sapiente iure mollitia, dolor dolore earum hic odio vel rerum magni ullam excepturi culpa laborum eos repellendus possimus quisquam, deserunt. Tempora obcaecati eaque culpa placeat libero quisquam, odit nihil atque voluptatibus ex hic consequatur. Inventore earum facilis odit aperiam culpa, optio ad, rem illo dignissimos modi ipsa rerum aut perspiciatis deserunt nobis odio asperiores in temporibus obcaecati, delectus, excepturi quasi. Praesentium maiores eum, iure et quidem labore cumque doloribus accusamus sunt obcaecati dicta, blanditiis in, neque vero incidunt. Optio libero dolore, explicabo vero, doloremque harum, laudantium sed laboriosam iste sapiente molestiae debitis porro veritatis. Asperiores facilis et, repellat dignissimos cupiditate qui molestias quia perferendis, necessitatibus, aliquam quasi inventore minus, id pariatur omnis nam ullam excepturi reprehenderit maxime quaerat hic. Repudiandae quae, natus eaque possimus adipisci libero veritatis, modi enim blanditiis cumque sunt eum omnis iusto! Consequuntur, minima, doloribus! Sequi vel fuga, alias dolor aliquid blanditiis fugiat in ratione architecto, culpa, dolores.</p>
<h4>Mercury</h4>
<p id="mercury">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae amet fugit, facere doloremque nemo, assumenda id corrupti, illo culpa laboriosam dolorum et explicabo omnis libero dicta placeat mollitia expedita nisi est. Impedit repellat sed ducimus dolore assumenda consectetur nobis? Illo vero, eos ratione deleniti suscipit officia excepturi numquam error. Consectetur dolorem, nostrum cum. Mollitia maxime vero ab, possimus accusamus tenetur nisi soluta. Tempore, nam eius necessitatibus molestiae quos dolor explicabo suscipit nesciunt beatae rem eaque modi, in accusantium error ex, placeat praesentium voluptate. Ea esse, debitis! Doloribus aspernatur ea possimus nemo tenetur officiis, vero explicabo porro magni illo! Maxime harum, ullam vel nemo praesentium adipisci laboriosam ad hic, provident non, impedit dolorem enim illum cupiditate ipsum tempora. Beatae fugit ratione cum hic numquam saepe magnam perferendis impedit optio exercitationem molestiae ducimus, aspernatur, ea obcaecati nisi quas veritatis voluptatum. Autem quae debitis nostrum consequatur. Nobis necessitatibus aliquam nisi, iste voluptates eligendi nihil libero cumque. Quibusdam iusto, ab distinctio aspernatur ea minima voluptatem autem ipsam maxime natus. Esse praesentium, laboriosam, adipisci voluptate et impedit expedita reprehenderit voluptatem suscipit cum delectus quam. Velit corrupti tenetur eum explicabo itaque delectus incidunt nulla? At sed enim veritatis. Eius corrupti explicabo quis enim modi illum voluptate laborum iure cupiditate ut fugiat numquam facere nostrum quia libero sunt asperiores, alias repellat, unde ducimus minima possimus. Neque mollitia odio eaque ipsum expedita impedit adipisci labore recusandae, doloremque nisi veniam, illo esse odit maiores deleniti perspiciatis dolore similique! Dicta similique itaque porro praesentium, voluptas nam sed ex dolore voluptatum nobis perferendis, dignissimos, iure doloremque, aut est libero neque maxime veritatis harum consequuntur explicabo delectus tenetur qui. Quam harum nesciunt debitis libero molestiae eius aliquid et tempore, magnam, odit animi itaque. Fugit, non assumenda expedita maxime aut earum molestias dolorem eveniet perferendis quisquam placeat adipisci, cum, nam, fuga quod. Placeat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, cupiditate quos debitis non in suscipit exercitationem nemo nostrum. Voluptates esse, voluptas quae accusamus molestias obcaecati, explicabo animi ullam maxime hic perferendis qui laudantium delectus magnam dolores temporibus dolorum corporis! Cum omnis doloribus eius perspiciatis sit sed deleniti ea, illum quos obcaecati non veritatis, eligendi a doloremque iste ab saepe, vel quia fugit ipsa nam repellendus provident. Quisquam dolore nihil unde sequi. Soluta illum magnam nesciunt enim similique facere cupiditate, voluptatem quasi aperiam consectetur fuga necessitatibus itaque blanditiis nemo consequuntur ullam at non illo ea, nisi aliquid dolores excepturi tenetur? Possimus consequuntur earum sit accusamus nihil tenetur, aliquid quis ex, atque neque. Tempora, inventore ex expedita explicabo. Porro perspiciatis, in. Odio nulla repudiandae perspiciatis commodi, ut consequatur voluptatum distinctio laborum fugit eligendi vitae, provident ab optio accusamus, modi eius ducimus nostrum aut! Deserunt placeat quod nisi amet accusantium dolores soluta, unde modi beatae, at in! Repellat vel, velit placeat earum, tempora magnam. Ducimus expedita, illum, dolore saepe quae, impedit, quibusdam laudantium ab dicta optio reprehenderit. Esse voluptates numquam eius optio iusto aliquid necessitatibus iure, omnis eligendi rerum ipsa ratione officiis nobis id, aspernatur at ad, dicta odio laboriosam illo officia asperiores. Dolorum dolore omnis soluta, obcaecati, debitis laudantium earum eligendi molestias? Eos consequuntur laudantium recusandae molestiae voluptates quos eum ipsa facilis iusto ducimus ipsum, iste obcaecati est consectetur error hic, quas officia, omnis cumque minus molestias unde! Aut magnam dicta beatae dolorum atque architecto possimus, quo aliquid, vel dignissimos harum unde nisi dolor asperiores tempora voluptatem neque cumque officiis cum. Debitis nulla, eligendi sed molestiae deserunt optio earum tempore natus eaque aspernatur soluta quibusdam tenetur, adipisci architecto, aperiam recusandae, quasi cum atque ad! Perferendis ipsum temporibus, assumenda sapiente. Laboriosam voluptatem fugiat, cupiditate impedit perspiciatis, vel ipsam rem deserunt, provident eaque aliquid. Vero amet sapiente alias magni eaque blanditiis, excepturi aspernatur maiores impedit nostrum maxime autem eveniet iure sit temporibus voluptas vel reprehenderit distinctio, eligendi cumque consequatur optio deleniti corporis sunt. Eligendi magnam id iure eveniet necessitatibus sit deserunt ipsam animi iusto suscipit, tempore voluptates facilis aut pariatur enim inventore in. Exercitationem dolores esse impedit ullam unde, inventore ipsa quibusdam assumenda rem provident eos odit temporibus harum voluptates neque. Aut, nostrum quae. Asperiores nemo ipsum molestias neque, officia non omnis magnam quis maiores, atque cum sunt ab facere mollitia ex deserunt amet, molestiae. Tempora expedita alias aut omnis, est fuga corporis mollitia.</p>
When you click the link the heading should be visible followed by the paragraph.
Because the height: 150px; and margin-top: -150px;, the highlighted target spreads outside.
You should target the headings not paragraphs :)
ul {
width: 100%;
right: 0;
background-color: red;
padding-top: 80px;
padding-bottom: 10px;
position: fixed;
top: 0;
}
/* offset target */
h4::before {
content: " ";
display: block;
height: 150px; /* fixed header height*/
margin-top: -150px; /* negative fixed header height */
visibility: hidden;
}
/* animation */
:target {
-webkit-animation-name: hght;
-webkit-animation-duration: 4s;
}
#-webkit-keyframes hght {
0% {background: transparent;}
10% {background: #fbfc76;}
80% {background: transparent;}
/* others */
a {
background-color: blue;
}
ul li{
list-style: none;
display: inline-block;
margin: 10px;
}
<ul>
<li>Sun</li>
<li>Mercury</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, sint minima quas illum impedit! Sunt expedita perferendis voluptatum assumenda error, numquam accusantium, voluptatibus commodi tempora consectetur velit consequatur placeat fugit quod qui minus repellat sint, eveniet architecto necessitatibus vel! Nam in sequi pariatur quasi amet hic autem natus dolorum alias explicabo architecto, nostrum cum quibusdam error, sapiente dicta, ab totam voluptatem est fugiat. Culpa labore architecto, sunt placeat modi quis unde temporibus quod voluptate tempore optio corporis distinctio repellat ab aliquam et non accusantium impedit dolores expedita, in cumque illum dolorum. Tenetur doloribus eligendi asperiores voluptates tempore, amet eum quaerat voluptatem illo cupiditate fuga magni omnis accusamus necessitatibus at consequatur odio maiores autem consequuntur culpa, repellat corrupti, qui repellendus quisquam. Sed maiores quis, facilis ab. Facere libero minus magni totam, impedit nihil excepturi vero, quos aliquam quae cupiditate eligendi distinctio doloribus odio consequatur, rerum deleniti ipsa id ad culpa cum dolorem. Quas autem iure, voluptatem rerum explicabo id optio rem sunt quam vel quidem illo aliquid, labore, nisi, molestias a in perspiciatis! Beatae deserunt quia odit officiis, optio reprehenderit necessitatibus eius culpa eveniet magni, minus, accusamus temporibus, repudiandae. Sit fugit expedita quia minus, beatae laboriosam omnis. Quos voluptas minus unde?</p>
<h4 id="sun">Sun</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae amet fugit, facere doloremque nemo, assumenda id corrupti, illo culpa laboriosam dolorum et explicabo omnis libero dicta placeat mollitia expedita nisi est. Impedit repellat sed ducimus dolore assumenda consectetur nobis? Illo vero, eos ratione deleniti suscipit officia excepturi numquam error. Consectetur dolorem, nostrum cum. Mollitia maxime vero ab, possimus accusamus tenetur nisi soluta. Tempore, nam eius necessitatibus molestiae quos dolor explicabo suscipit nesciunt beatae rem eaque modi, in accusantium error ex, placeat praesentium voluptate. Ea esse, debitis! Doloribus aspernatur ea possimus nemo tenetur officiis, vero explicabo porro magni illo! Maxime harum, ullam vel nemo praesentium adipisci laboriosam ad hic, provident non, impedit dolorem enim illum cupiditate ipsum tempora. Beatae fugit ratione cum hic numquam saepe magnam perferendis impedit optio exercitationem molestiae ducimus, aspernatur, ea obcaecati nisi quas veritatis voluptatum. Autem quae debitis nostrum consequatur. Nobis necessitatibus aliquam nisi, iste voluptates eligendi nihil libero cumque. Quibusdam iusto, ab distinctio aspernatur ea minima voluptatem autem ipsam maxime natus. Esse praesentium, laboriosam, adipisci voluptate et impedit expedita reprehenderit voluptatem suscipit cum delectus quam. Velit corrupti tenetur eum explicabo itaque delectus incidunt nulla? At sed enim veritatis. Eius corrupti explicabo quis enim modi illum voluptate laborum iure cupiditate ut fugiat numquam facere nostrum quia libero sunt asperiores, alias repellat, unde ducimus minima possimus. Neque mollitia odio eaque ipsum expedita impedit adipisci labore recusandae, doloremque nisi veniam, illo esse odit maiores deleniti perspiciatis dolore similique! Dicta similique itaque porro praesentium, voluptas nam sed ex dolore voluptatum nobis perferendis, dignissimos, iure doloremque, aut est libero neque maxime veritatis harum consequuntur explicabo delectus tenetur qui. Quam harum nesciunt debitis libero molestiae eius aliquid et tempore, magnam, odit animi itaque. Fugit, non assumenda expedita maxime aut earum molestias dolorem eveniet perferendis quisquam placeat adipisci, cum, nam, fuga quod. Placeat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ducimus totam ipsa sint velit at sequi corporis ipsam voluptatum tenetur aut, dolorum, sapiente nihil! Laudantium blanditiis doloremque porro cumque, nemo facere, vero illo nesciunt non ab repellendus ad temporibus, quis, provident odio amet. Dolorem, laboriosam quas officia. Et cumque sint molestias quas provident nostrum, dignissimos pariatur voluptas aliquid, repellendus consectetur recusandae iusto, earum iure ducimus enim similique quibusdam autem natus! Incidunt, sunt illum error. Autem asperiores molestias iure, recusandae voluptas tenetur accusantium iste, molestiae provident quibusdam dolore facilis cupiditate rerum, cumque corporis alias maiores, est ab. Quae eaque veritatis quia quasi error a provident pariatur, rerum molestiae magnam expedita autem quidem! Perferendis aut beatae, cumque fugit natus quidem quia facere magni aperiam accusantium. Neque cumque quis vel aut quas ipsam numquam fugit possimus facere ut! Ut error voluptatibus neque doloribus consequuntur at voluptates! Eaque perspiciatis, quas, sit facere praesentium sapiente iure mollitia, dolor dolore earum hic odio vel rerum magni ullam excepturi culpa laborum eos repellendus possimus quisquam, deserunt. Tempora obcaecati eaque culpa placeat libero quisquam, odit nihil atque voluptatibus ex hic consequatur. Inventore earum facilis odit aperiam culpa, optio ad, rem illo dignissimos modi ipsa rerum aut perspiciatis deserunt nobis odio asperiores in temporibus obcaecati, delectus, excepturi quasi. Praesentium maiores eum, iure et quidem labore cumque doloribus accusamus sunt obcaecati dicta, blanditiis in, neque vero incidunt. Optio libero dolore, explicabo vero, doloremque harum, laudantium sed laboriosam iste sapiente molestiae debitis porro veritatis. Asperiores facilis et, repellat dignissimos cupiditate qui molestias quia perferendis, necessitatibus, aliquam quasi inventore minus, id pariatur omnis nam ullam excepturi reprehenderit maxime quaerat hic. Repudiandae quae, natus eaque possimus adipisci libero veritatis, modi enim blanditiis cumque sunt eum omnis iusto! Consequuntur, minima, doloribus! Sequi vel fuga, alias dolor aliquid blanditiis fugiat in ratione architecto, culpa, dolores.</p>
<h4 id="mercury">Mercury</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae amet fugit, facere doloremque nemo, assumenda id corrupti, illo culpa laboriosam dolorum et explicabo omnis libero dicta placeat mollitia expedita nisi est. Impedit repellat sed ducimus dolore assumenda consectetur nobis? Illo vero, eos ratione deleniti suscipit officia excepturi numquam error. Consectetur dolorem, nostrum cum. Mollitia maxime vero ab, possimus accusamus tenetur nisi soluta. Tempore, nam eius necessitatibus molestiae quos dolor explicabo suscipit nesciunt beatae rem eaque modi, in accusantium error ex, placeat praesentium voluptate. Ea esse, debitis! Doloribus aspernatur ea possimus nemo tenetur officiis, vero explicabo porro magni illo! Maxime harum, ullam vel nemo praesentium adipisci laboriosam ad hic, provident non, impedit dolorem enim illum cupiditate ipsum tempora. Beatae fugit ratione cum hic numquam saepe magnam perferendis impedit optio exercitationem molestiae ducimus, aspernatur, ea obcaecati nisi quas veritatis voluptatum. Autem quae debitis nostrum consequatur. Nobis necessitatibus aliquam nisi, iste voluptates eligendi nihil libero cumque. Quibusdam iusto, ab distinctio aspernatur ea minima voluptatem autem ipsam maxime natus. Esse praesentium, laboriosam, adipisci voluptate et impedit expedita reprehenderit voluptatem suscipit cum delectus quam. Velit corrupti tenetur eum explicabo itaque delectus incidunt nulla? At sed enim veritatis. Eius corrupti explicabo quis enim modi illum voluptate laborum iure cupiditate ut fugiat numquam facere nostrum quia libero sunt asperiores, alias repellat, unde ducimus minima possimus. Neque mollitia odio eaque ipsum expedita impedit adipisci labore recusandae, doloremque nisi veniam, illo esse odit maiores deleniti perspiciatis dolore similique! Dicta similique itaque porro praesentium, voluptas nam sed ex dolore voluptatum nobis perferendis, dignissimos, iure doloremque, aut est libero neque maxime veritatis harum consequuntur explicabo delectus tenetur qui. Quam harum nesciunt debitis libero molestiae eius aliquid et tempore, magnam, odit animi itaque. Fugit, non assumenda expedita maxime aut earum molestias dolorem eveniet perferendis quisquam placeat adipisci, cum, nam, fuga quod. Placeat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, cupiditate quos debitis non in suscipit exercitationem nemo nostrum. Voluptates esse, voluptas quae accusamus molestias obcaecati, explicabo animi ullam maxime hic perferendis qui laudantium delectus magnam dolores temporibus dolorum corporis! Cum omnis doloribus eius perspiciatis sit sed deleniti ea, illum quos obcaecati non veritatis, eligendi a doloremque iste ab saepe, vel quia fugit ipsa nam repellendus provident. Quisquam dolore nihil unde sequi. Soluta illum magnam nesciunt enim similique facere cupiditate, voluptatem quasi aperiam consectetur fuga necessitatibus itaque blanditiis nemo consequuntur ullam at non illo ea, nisi aliquid dolores excepturi tenetur? Possimus consequuntur earum sit accusamus nihil tenetur, aliquid quis ex, atque neque. Tempora, inventore ex expedita explicabo. Porro perspiciatis, in. Odio nulla repudiandae perspiciatis commodi, ut consequatur voluptatum distinctio laborum fugit eligendi vitae, provident ab optio accusamus, modi eius ducimus nostrum aut! Deserunt placeat quod nisi amet accusantium dolores soluta, unde modi beatae, at in! Repellat vel, velit placeat earum, tempora magnam. Ducimus expedita, illum, dolore saepe quae, impedit, quibusdam laudantium ab dicta optio reprehenderit. Esse voluptates numquam eius optio iusto aliquid necessitatibus iure, omnis eligendi rerum ipsa ratione officiis nobis id, aspernatur at ad, dicta odio laboriosam illo officia asperiores. Dolorum dolore omnis soluta, obcaecati, debitis laudantium earum eligendi molestias? Eos consequuntur laudantium recusandae molestiae voluptates quos eum ipsa facilis iusto ducimus ipsum, iste obcaecati est consectetur error hic, quas officia, omnis cumque minus molestias unde! Aut magnam dicta beatae dolorum atque architecto possimus, quo aliquid, vel dignissimos harum unde nisi dolor asperiores tempora voluptatem neque cumque officiis cum. Debitis nulla, eligendi sed molestiae deserunt optio earum tempore natus eaque aspernatur soluta quibusdam tenetur, adipisci architecto, aperiam recusandae, quasi cum atque ad! Perferendis ipsum temporibus, assumenda sapiente. Laboriosam voluptatem fugiat, cupiditate impedit perspiciatis, vel ipsam rem deserunt, provident eaque aliquid. Vero amet sapiente alias magni eaque blanditiis, excepturi aspernatur maiores impedit nostrum maxime autem eveniet iure sit temporibus voluptas vel reprehenderit distinctio, eligendi cumque consequatur optio deleniti corporis sunt. Eligendi magnam id iure eveniet necessitatibus sit deserunt ipsam animi iusto suscipit, tempore voluptates facilis aut pariatur enim inventore in. Exercitationem dolores esse impedit ullam unde, inventore ipsa quibusdam assumenda rem provident eos odit temporibus harum voluptates neque. Aut, nostrum quae. Asperiores nemo ipsum molestias neque, officia non omnis magnam quis maiores, atque cum sunt ab facere mollitia ex deserunt amet, molestiae. Tempora expedita alias aut omnis, est fuga corporis mollitia.</p>
Link to fiddle
EDIT: to highlight the p tag, use this:
h4:target + p {
animation-name: hght;
animation-duration: 4s;
}
You could try with the following JS (requires jQuery):
$( 'a[href="#"]' ).click( function(e) {
e.preventDefault();
} );
or if you don't have jQuery in your project you can also write it in vanilla JS:
var anchors = document.getElementsByTagName('a[href="#"]');
for(i=0, len=anchors.length; i<len; i++){
anchors[i].addEventListener('click', function(e){e.preventDefault();});
}
Using this script you're able to remove both height and margin-top from the pseudo-element
using preventDefault() will not trigger the default action for the a tag.
Here's a working fiddle with the intended behaviour