I'm creating the following layout with a sidebar and a flexbox container having 3 boxs with middle one having scrolling.
The problem I'm running into is, when i zoom in, the content goes past the viewable screen and when i zoom out it leaves a white blank screen on the right side.
I'm attaching a video link and the code to help you guys understand, and hopefully help me out here.
https://www.awesomescreenshot.com/video/7839859?key=b61f0db322aecd2c43d5f1749178dcf1
* {
margin: 0;
padding: 0;
}
html,
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
.sidebar {
width: 12%;
height: -webkit-fill-available;
position: fixed;
top: 0;
left: 0;
background-color: black;
overflow-y: scroll;
}
.container {
position: fixed;
left: 12%;
height: 100%;
width: 100%;
}
.navbar {
background-color: grey;
}
.navbar h2 {
text-align: center;
}
.fluid-container {
background-color: rgb(193, 224, 236);
height: 100%;
display: flex;
width: 100%;
}
.box {
width: 100%;
background-color: black;
border: 1px solid red;
}
.item {
width: 220px;
height: 100%;
border: 1px solid green;
margin: 15px;
background-color: sandybrown;
}
#item1 {
height: calc(100vh - 100px);
}
#item2 {
overflow-y: scroll;
height: calc(100vh - 100px);
}
#item3 {
height: calc(100vh - 100px);
}
.items-container {
display: flex;
}
<div class="sidebar">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, porro reprehenderit iure sed voluptates aperiam delectus excepturi inventore non, esse a repellat dolores obcaecati, libero dolor rerum aspernatur ullam? Nam?Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Error, molestias eveniet! Voluptate vel nam dolorem beatae explicabo neque reprehenderit delectus similique distinctio natus molestias, quae unde ducimus ea dolore illo quis aliquam hic consequatur incidunt quidem animi
fuga eum mollitia? Veritatis temporibus magnam placeat facere deleniti dolorem consequatur praesentium! Voluptatibus cum, ducimus repudiandae, neque distinctio ad laudantium, vitae minus odit repellat praesentium ipsum laborum atque iste quibusdam
perspiciatis assumenda corrupti.</p>
</div>
<div class="container">
<div class="navbar">
<h2>Header Section</h2>
</div>
<div class="fluid-container">
<div id="box1" class="box">
<h2 style="text-align: center; font-size: 2rem; margin-top: 5px;">Tri Column Title</h2>
<div class="items-container">
<div id="item1" class="item">
<h2>Title 1</h2>
</div>
<div id="item2" class="item">
<h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus
est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore
repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat
adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus
ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis
error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis
explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur
explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem
labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium
sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim
in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque
similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi
vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt
temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos,
ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione
ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate
sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium
corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" class="item">
<h2>Title 3</h2>
</div>
</div>
</div>
<div id="box2" class="box">
<div class="items-container">
<div id="item1" class="item">
<h2>Title 1</h2>
</div>
<div id="item2" class="item">
<h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus
est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore
repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat
adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus
ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis
error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis
explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur
explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem
labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium
sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim
in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque
similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi
vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt
temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos,
ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione
ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate
sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium
corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" class="item">
<h2>Title 3</h2>
</div>
</div>
</div>
</div>
</div>
So, I was able to achieve that, by using some relative values instead of fixed values. Here are the changes that I did:
Changed width of .container class from 88% to 100% to let it occupy space, as much as it wants.
Since, space taken by sidebar was 12% of total space, I divided remaining space by 2 so that both containers have equal share, i.e. changed the width of .box class from 100% to 44%((100%-12%)/2=44%).
Changed width of .item class to 32.3% since, 32.3+32.3+32.3 ≅ 97% and added the remaining 1% as margin instead of a fixed, 15px margin (Also added 1% padding to prevent collapse).
Note: Using relative values can easily solve any such problem. It's always better to use relative values while developing websites.
Here's final code:
* {
margin: 0;
padding: 0;
}
html,
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
width: 100%;
height: 100%;
}
.sidebar {
width: 12%;
height: -webkit-fill-available;
position: fixed;
top: 0;
left: 0;
background-color: black;
overflow-y: scroll;
}
.container {
position: fixed;
left: 12%;
height: 100%;
width: 100%;
}
.navbar {
background-color: grey;
}
.navbar h2 {
text-align: center;
}
.fluid-container {
background-color: rgb(193, 224, 236);
height: 100%;
display: flex;
width: 100%;
}
.box {
width:44%;
background-color: black;
border: 1px solid red;
}
.item {
width: 32.3%;
height: 100%;
padding:1%;
border: 1px solid green;
margin:1%;
background-color: sandybrown;
}
#item1 {
height: calc(100vh - 100px);
}
#item2 {
overflow-y: scroll;
height: calc(100vh - 100px);
}
#item3 {
height: calc(100vh - 100px);
}
.items-container {
display: flex;
}
<div class="sidebar">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, porro reprehenderit iure sed voluptates aperiam delectus excepturi inventore non, esse a repellat dolores obcaecati, libero dolor rerum aspernatur ullam? Nam?Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Error, molestias eveniet! Voluptate vel nam dolorem beatae explicabo neque reprehenderit delectus similique distinctio natus molestias, quae unde ducimus ea dolore illo quis aliquam hic consequatur incidunt quidem animi
fuga eum mollitia? Veritatis temporibus magnam placeat facere deleniti dolorem consequatur praesentium! Voluptatibus cum, ducimus repudiandae, neque distinctio ad laudantium, vitae minus odit repellat praesentium ipsum laborum atque iste quibusdam
perspiciatis assumenda corrupti.</p>
</div>
<div class="container">
<div class="navbar">
<h2>Header Section</h2>
</div>
<div class="fluid-container">
<div id="box1" class="box">
<h2 style="text-align: center; font-size: 2rem; margin-top: 5px;">Tri Column Title</h2>
<div class="items-container">
<div id="item1" class="item">
<h2>Title 1</h2>
</div>
<div id="item2" class="item">
<h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus
est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore
repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat
adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus
ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis
error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis
explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur
explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem
labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium
sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim
in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque
similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi
vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt
temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos,
ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione
ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate
sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium
corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" class="item">
<h2>Title 3</h2>
</div>
</div>
</div>
<div id="box2" class="box">
<div class="items-container">
<div id="item1" class="item">
<h2>Title 1</h2>
</div>
<div id="item2" class="item">
<h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus
est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore
repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat
adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus
ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis
error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis
explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur
explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem
labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium
sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim
in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque
similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi
vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt
temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos,
ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione
ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate
sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium
corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" class="item">
<h2>Title 3</h2>
</div>
</div>
</div>
</div>
</div>
Add height: 100%; and width: 100%; to your HTML and body. Then specify width: 88%; on your container, because your sidebar is taking up 12%. 88+12=100%.
Finally, and most importantly. You have a fixed width on each item of 220px. This means it will not dynamically grow or shrink when you zoom in or zoom out. Instead use width: 100%;.
* {
margin: 0;
padding: 0;
}
html,
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
width: 100%;
height: 100%;
}
.sidebar {
width: 12%;
height: -webkit-fill-available;
position: fixed;
top: 0;
left: 0;
background-color: black;
overflow-y: scroll;
}
.container {
position: fixed;
left: 12%;
height: 100%;
width: 88%;
}
.navbar {
background-color: grey;
}
.navbar h2 {
text-align: center;
}
.fluid-container {
background-color: rgb(193, 224, 236);
height: 100%;
display: flex;
width: 100%;
}
.box {
width: 100%;
background-color: black;
border: 1px solid red;
}
.item {
width: 100%;
height: 100%;
border: 1px solid green;
margin: 15px;
background-color: sandybrown;
}
#item1 {
height: calc(100vh - 100px);
}
#item2 {
overflow-y: scroll;
height: calc(100vh - 100px);
}
#item3 {
height: calc(100vh - 100px);
}
.items-container {
display: flex;
}
<div class="sidebar">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, porro reprehenderit iure sed voluptates aperiam delectus excepturi inventore non, esse a repellat dolores obcaecati, libero dolor rerum aspernatur ullam? Nam?Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Error, molestias eveniet! Voluptate vel nam dolorem beatae explicabo neque reprehenderit delectus similique distinctio natus molestias, quae unde ducimus ea dolore illo quis aliquam hic consequatur incidunt quidem animi
fuga eum mollitia? Veritatis temporibus magnam placeat facere deleniti dolorem consequatur praesentium! Voluptatibus cum, ducimus repudiandae, neque distinctio ad laudantium, vitae minus odit repellat praesentium ipsum laborum atque iste quibusdam
perspiciatis assumenda corrupti.</p>
</div>
<div class="container">
<div class="navbar">
<h2>Header Section</h2>
</div>
<div class="fluid-container">
<div id="box1" class="box">
<h2 style="text-align: center; font-size: 2rem; margin-top: 5px;">Tri Column Title</h2>
<div class="items-container">
<div id="item1" class="item">
<h2>Title 1</h2>
</div>
<div id="item2" class="item">
<h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus
est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore
repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat
adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus
ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis
error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis
explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur
explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem
labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium
sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim
in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque
similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi
vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt
temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos,
ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione
ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate
sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium
corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" class="item">
<h2>Title 3</h2>
</div>
</div>
</div>
<div id="box2" class="box">
<div class="items-container">
<div id="item1" class="item">
<h2>Title 1</h2>
</div>
<div id="item2" class="item">
<h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus
est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore
repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat
adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus
ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis
error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis
explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur
explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem
labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium
sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim
in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque
similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi
vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt
temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos,
ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione
ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate
sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium
corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" class="item">
<h2>Title 3</h2>
</div>
</div>
</div>
</div>
</div>
Add this to the top of your html code in the head section
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I want the body section to scroll all the way up, with the sidebar section to the top of the screen, through multiple trial-and-error, the sidebar can do that, but the content section goes back to the bottom. I want when entering that page that the content and sidebar are aligned. Did I overlook where?
<style>
/* The side navigation menu */
.sidebar {
margin: 0;
padding: 0;
width: 230px;
background-color: #f1f1f1;
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 0 15px;
}
</style>
sidebar section
<div class="sidebar">
sidebar
sidebar
sidebar
</div>
content section
<div class="content">
<div class="col-12" id="main">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h1">content</h1>
</div>
<div class="card border-success">
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto voluptatem, soluta error at sequi cum veniam dolorem obcaecati ratione sunt accusamus saepe fugiat ipsam modi reiciendis facilis illum necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus eveniet ab sed cumque repudiandae qui assumenda, aut quibusdam libero similique voluptatibus dolor dolorem fugiat explicabo? Quia illum illo maxime modi?</p>
</div>
</div>
</div>
You can use flexbox to get the desired result.
Here's an example:
.wrapper {
display: flex;
justify-content: space-between;
}
.sidebar {
position: sticky;
top: 0;
width: 230px;
height: 100vh;
}
.content {
width: 900px;
padding: 0 10px;
}
<div class="wrapper">
<div class="sidebar">
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Sunt, accusamus repudiandae.</li>
<li>Cumque, vitae ut.</li>
<li>Officiis, a esse.</li>
<li>Soluta, maiores commodi.</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde quis quas ut enim corrupti error, alias praesentium assumenda cum iure nam ipsum recusandae sint facilis quia cupiditate obcaecati tempore maxime ea qui vel eveniet eius nulla ad. Nemo
cum repellat eum eos placeat. Repellendus autem sapiente maiores error officia maxime qui neque illo nemo magnam?</p>
<p>Delectus quae ipsa quos aliquam officia. Error facere perspiciatis veritatis, doloremque nisi nesciunt quaerat cumque repellendus nam cum minus ratione. Culpa repudiandae at, perspiciatis ad ea ducimus minima molestiae rerum aut laudantium non, placeat
exercitationem saepe, impedit velit tempore distinctio illum? Libero cumque a illum perspiciatis, praesentium ea tempore dolor ducimus, consequuntur veniam aut ipsa?</p>
<p>Omnis, fuga asperiores in, dolorum optio facilis ea eaque ad dolor quidem, harum magnam nisi? Voluptate deserunt et, pariatur eum similique ab ex quisquam rem, possimus nemo eius! Veritatis, deleniti dolorum ex eveniet eaque aut rerum, exercitationem
in quisquam, adipisci explicabo provident quae non praesentium fugiat. Molestias laudantium obcaecati animi aliquam corrupti delectus iste rem.</p>
<p>Nobis aliquam cum commodi, nesciunt suscipit nemo hic reiciendis ullam doloribus distinctio consequatur, neque totam. Esse atque soluta, necessitatibus minus debitis illum error, provident totam quam quae tempore, blanditiis nobis! Eligendi dolor
illum error fuga ex distinctio. Quibusdam, omnis modi ratione consectetur, porro doloremque inventore dolorem dolores perspiciatis neque cupiditate iusto dolore voluptas blanditiis autem.</p>
<p>Impedit id eius rerum optio? Similique repellat optio nostrum, ratione maiores aperiam et. Obcaecati, iste. Saepe eligendi libero recusandae repellat, commodi ab placeat id nobis aliquam neque dolorum ipsa minima harum pariatur eaque reiciendis assumenda
perferendis animi officia! Maiores totam et quia, nulla libero odio accusantium voluptatibus, maxime, perspiciatis porro rerum dolores eaque veritatis officia!</p>
<p>Reprehenderit ducimus, saepe omnis, vel deserunt maiores nostrum similique dolorem dolorum libero nisi iste repellat ullam odit, veritatis est officiis ut adipisci fuga eius illo necessitatibus esse ratione doloremque. Accusamus neque inventore dicta
ipsa iusto ex debitis labore est, adipisci odit suscipit repellendus sit atque aliquid omnis provident explicabo minima necessitatibus sapiente nobis ratione quam.</p>
<p>Velit, consectetur veritatis et non sunt corporis repellendus totam saepe nihil voluptate exercitationem dignissimos in corrupti culpa, excepturi necessitatibus vitae fugiat. Exercitationem dolores voluptas, numquam ea libero voluptatem consequuntur
necessitatibus quia iusto quam, aperiam repellendus molestias nobis sapiente. Corrupti autem nemo commodi maxime libero assumenda nulla, animi modi alias, consequatur facilis cumque accusantium sapiente architecto!</p>
</div>
</div>
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.