Related
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'm have created a layout with sidebar and 2 flexboxs, in the second box containing 3 title boxs i want a horizontal scroll bar to scroll and show other titles but it wont work, also the end arrow of the scroll bar doesnot show. I'm attaching a image to help you understand look at the second box on the right hand bottom of the screen.
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
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: 550px;
}
#item2 {
overflow-y:scroll;
height: calc(100vh - 100px);
}
#item3 {
height: 680px;
}
.items-container {
display: flex;
}
#box-2 {
overflow-x:scroll;
}
<!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">
<link rel="stylesheet" href="styles.css">
<!--<script src="https://cdn.tailwindcss.com"></script>-->
<title>Tri Column Layout</title>
</head>
<body>
<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 id="box-2" 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>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
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: auto;
}
.container {
position: relative;
left: 12%;
height: 100%;
width: 100%;
/* overflow-x: scroll;
overflow-y: scroll;*/
}
.navbar {
background-color: grey;
}
.navbar h2 {
text-align: center;
}
.fluid-container {
background-color: rgb(193, 224, 236);
height: 100%;
display: flex;
width: 100%;
/* overflow-x:auto;
overflow-y: auto;*/
}
.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: 550px;
}
#item2 {
overflow-y:auto;
height: calc(100vh - 100px);
}
#item3 {
height: 680px;
}
.items-container {
display: flex;
}
#box-2 {
overflow-x:auto;
}
<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 id="box-2" 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>
I have two styles for my navbar (.navbar and .navbar_fixed). And links in the navbar don't fit in it properly. I tried to remove padding and add left: 0; but it doesn't work. How can I fix that?
$(document).ready(function() {
$(window).scroll(function () {
if ($(window).scrollTop() > 280) {
$('.navbar').addClass('navbar_fixed');
$('.navbar_fixed').removeClass('navbar');
}
if ($(window).scrollTop() < 281) {
$('.navbar_fixed').addClass('navbar');
$('.navbar').removeClass('navbar_fixed');
}
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Montserrat', sans-serif;
}
.global-padding {
padding-right: 98px;
padding-left: 98px;
}
.clearfix:after {
display: table;
clear: both;
content: '';
}
.container {
width: 100%;
max-width: 1366px;
}
.navbar {
padding-top: 63px;
}
.navbar_fixed {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 32px;
padding: 23px 98px 0 98px;
background-color: #ffffff;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.25);
}
.navbar__menu {
float: right;
list-style: none;
}
.navbar__link-item {
float: left;
}
.navbar__link {
font-size: 14px;
font-weight: 300;
padding: 10px 13px;
text-decoration: none;
text-transform: uppercase;
color: #8c8c8c;
}
.navbar__link:hover {
color: #212121;
}
.navbar__link_active {
font-weight: 700;
letter-spacing: 1.4px;
color: #212121;
border-bottom: 3px solid #212121;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<nav class="global-padding navbar clearfix">
<img src="img/logo.svg" alt="Interior Logo">
<ul class="clearfix navbar__menu">
<li class="navbar__link-item">HOME</li>
<li class="navbar__link-item">PRODUCTS</li>
<li class="navbar__link-item">HISTORY</li>
<li class="navbar__link-item">SHOWROOM</li>
<li class="navbar__link-item">CONTACT</li>
<li class="navbar__link-item"><img src="{% static "img/search.svg" %}" alt="" class="navbar__search"></li>
</ul>
</nav>
<div class="container">
<p class="global-padding" style="margin-top: 20px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, ad tempore eaque autem at veritatis, modi a tenetur eius rem fugiat sunt esse! Placeat tempore quae quia eius alias! Ea officia modi cum sint pariatur architecto vero corrupti autem ex ratione asperiores commodi dolore fugiat, enim blanditiis quas accusamus sunt aperiam praesentium, accusantium excepturi? Ea, labore? Explicabo neque atque eveniet totam aperiam repellendus minima quia amet exercitationem laborum, quo tempore facilis dolores magni tenetur. Fuga nobis sit neque alias eos minima. Maiores quisquam soluta iure corrupti minima, ut enim error, ab nihil consectetur cupiditate, quod magni consequatur adipisci repudiandae architecto culpa suscipit! A minus omnis molestiae aut. Nam fugiat at, est voluptatem minus sint dolor commodi odio aperiam necessitatibus voluptatum ipsam nesciunt explicabo consequuntur nostrum hic, vitae eius blanditiis. Rem exercitationem, iure eligendi ullam accusamus, tempore impedit dignissimos perferendis quam iusto nulla molestias eos aliquam. Dolorum nisi atque nam! Iste vitae perferendis magni quos omnis impedit alias tenetur sed dolorem cupiditate totam sit nobis debitis blanditiis, cum ipsa, in earum ipsam. Asperiores atque molestiae fuga, quos tenetur repellat exercitationem magnam, voluptatibus aperiam dolore quisquam doloremque ratione perspiciatis autem in porro accusamus error accusantium iusto? Excepturi, pariatur repudiandae natus sed in totam voluptatibus laboriosam sint rerum nobis iusto quibusdam, perspiciatis alias ducimus quae dolorem eius, labore non ipsa quas. Tempore quis, beatae consequuntur explicabo asperiores eaque nisi ratione amet aliquid nesciunt atque? Enim laboriosam minima vero mollitia, quaerat porro facere laborum culpa molestiae perferendis? Quibusdam aut itaque, explicabo molestiae reprehenderit minima, et, soluta repellendus ipsam odio rem. Neque, dicta at voluptatum excepturi officiis vitae? Quidem debitis id sit amet recusandae facere rerum optio exercitationem necessitatibus cupiditate, illum magni ex reprehenderit fugiat culpa numquam maiores iste laudantium quasi ab neque! Quaerat consequuntur ipsa saepe quas perferendis consequatur neque rem pariatur corporis quia, enim eos dolorem reiciendis incidunt, ad architecto labore dignissimos adipisci sit in omnis cupiditate fuga? Blanditiis, maxime veniam quae ipsum labore ipsa quo necessitatibus, nostrum, magni omnis quidem voluptatum? Facilis vel reiciendis veniam consequatur dolorum minus! Blanditiis perferendis eveniet facilis. Assumenda corrupti libero eaque laborum labore expedita ab aperiam, neque fugiat id nesciunt dolore cupiditate reprehenderit, dignissimos distinctio ipsam. Minus sit, explicabo quae quos aliquam doloremque expedita consequuntur repellendus vel dicta? Dolorem aliquid placeat distinctio aperiam a aspernatur, ipsam quam minus doloribus, ad exercitationem quae? Ea iusto minus numquam fugiat inventore aspernatur perferendis temporibus pariatur nostrum cum eligendi, ab ratione modi similique quae rerum quasi tenetur dolor iure ut nemo molestias eveniet. Architecto soluta consequuntur optio quod, quos qui accusantium sit deserunt. Deleniti rerum explicabo sed. Voluptatibus, enim sit voluptas itaque quidem reiciendis asperiores quasi ipsum cumque consequuntur totam culpa suscipit natus repudiandae doloribus quas exercitationem veritatis sequi neque possimus qui voluptatum, nulla consectetur vel. Soluta reprehenderit perspiciatis debitis laboriosam, porro, possimus quis dolorem velit aperiam a aliquid blanditiis enim culpa dicta harum. Laborum reprehenderit enim est, eius laudantium quas ad molestias, quaerat debitis ullam quidem. Ut pariatur necessitatibus itaque at excepturi? Ratione, officiis amet repellat delectus recusandae eligendi quasi quidem esse similique quod at eum, placeat iure dignissimos magni modi debitis, nulla iusto facilis obcaecati ut. Sunt, delectus cumque aperiam exercitationem aut similique illum consectetur nostrum iusto iure aliquid impedit aspernatur dolore commodi. Asperiores saepe tempora architecto. Delectus dolorem distinctio obcaecati rerum eos eum fugiat ducimus, dignissimos, aperiam cupiditate non vel rem facere culpa eius doloribus laborum unde quod quos quae porro dolore natus. Et sed alias consectetur? Illo voluptatem possimus asperiores excepturi sed culpa dolore vitae est, esse laboriosam qui! Corporis, cupiditate ad tempore illo esse deleniti assumenda dignissimos mollitia eum odit dolores nostrum a odio maiores aperiam? Quisquam debitis perspiciatis expedita veritatis earum nemo modi eaque dolores nulla sapiente aperiam, assumenda magni quaerat iure nostrum cumque, repudiandae deleniti voluptatibus laborum! Perspiciatis quisquam aliquid nulla debitis doloremque, mollitia cumque ad totam quae suscipit, dolorum ratione perferendis consectetur magnam maxime facilis molestias quo impedit at asperiores, blanditiis et necessitatibus iure itaque. Ratione minus vero corporis mollitia velit ipsa quibusdam provident modi fugit suscipit, dolorem tempore? Recusandae ullam sit aspernatur sequi unde quas enim animi repellat perferendis rem nam praesentium, aperiam dicta eos temporibus quae! Laudantium placeat quibusdam consequuntur incidunt dolorem quia quos nulla sed aliquid accusantium quaerat consectetur obcaecati fugiat earum, laboriosam, inventore aspernatur amet at assumenda. Est dolore beatae non neque, ipsa ullam, perspiciatis laudantium ratione reiciendis vitae nobis veniam deleniti aliquam sapiente distinctio, voluptate enim praesentium fugiat libero repellat omnis ipsum. Veniam deserunt, ea in placeat distinctio facilis adipisci recusandae tempora iusto nisi excepturi sunt quae reprehenderit, tenetur enim, necessitatibus omnis et quisquam voluptate quia ipsum incidunt. Nisi sit ex mollitia aperiam nesciunt doloribus laborum rerum, dolorum deleniti asperiores ducimus maiores ea enim similique quas sunt? Sit fugit quibusdam adipisci culpa dolorum perferendis doloribus quo, placeat laboriosam expedita voluptatem totam dignissimos aspernatur aut soluta laborum! Repudiandae consequatur deleniti deserunt tempora error eveniet doloribus obcaecati, mollitia veritatis labore minima eum nihil ratione voluptate sit magni, voluptas quo exercitationem quia natus dolor. Cumque vitae ullam tempore hic fugiat esse a consequuntur libero asperiores minima cum earum repellat, ab, enim aliquam commodi saepe dolore nihil similique itaque laboriosam iure praesentium obcaecati! Eius, sed. In ipsam doloremque illum vel, sequi cupiditate, blanditiis dolores nihil aliquam veritatis facilis a impedit fugit cum, dolorum deleniti suscipit non velit laudantium ipsa maiores inventore nostrum animi? Error iusto, officiis saepe laborum nam repellat dolore aperiam ab deserunt distinctio quis amet vero, numquam obcaecati impedit quidem tempora corporis doloremque accusamus. Unde eveniet dolor quia maiores dolorem dicta. Veritatis nemo quos cum expedita doloribus, dolor recusandae soluta error, accusamus dolorum quis illo laudantium voluptatem aut repellendus optio, libero numquam eligendi enim totam distinctio. Sequi autem expedita eligendi vitae et quia dolorum adipisci. Expedita dolor tenetur, ipsa repellendus harum tempora aliquid delectus beatae quis ex cum sit sapiente hic deleniti incidunt ipsam repellat vitae. Porro distinctio, voluptatum rerum eius et corrupti fuga sapiente quia suscipit temporibus, nihil velit similique voluptatibus harum molestiae. Nemo, omnis quis facere ab nulla fuga tempore doloribus officia vitae commodi dolor, placeat voluptate beatae?
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
I added class .navbar__menu_fixed and set padding-right: 196px; (doubled default padding), also I modified my script.
$(document).ready(function() {
$(window).scroll(function () {
if ($(window).scrollTop() > 280) {
$('.navbar').addClass('navbar_fixed');
$('.navbar_fixed').removeClass('navbar');
$('.navbar__menu').addClass('navbar__menu_fixed');
$('.navbar__menu_fixed').removeClass('navbar__menu');
}
if ($(window).scrollTop() < 281) {
$('.navbar_fixed').addClass('navbar');
$('.navbar').removeClass('navbar_fixed');
$('.navbar__menu_fixed').addClass('navbar__menu');
$('.navbar__menu').removeClass('navbar__menu_fixed');
}
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Montserrat', sans-serif;
}
.global-padding {
padding-right: 98px;
padding-left: 98px;
}
.clearfix:after {
display: table;
clear: both;
content: '';
}
.container {
width: 100%;
max-width: 1366px;
}
.navbar {
padding-top: 63px;
padding-right: 98px;
padding-left: 98px;
}
.navbar_fixed {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 32px;
padding-top: 23px;
padding-left: 98px;
padding-right: 98px;
background-color: #ffffff;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.25);
}
.navbar__menu {
float: right;
list-style: none;
}
.navbar__menu_fixed {
float: right;
padding-right: 196px;
list-style: none;
}
.navbar__link-item {
float: left;
}
.navbar__link {
font-size: 14px;
font-weight: 300;
padding: 10px 13px;
text-decoration: none;
text-transform: uppercase;
color: #8c8c8c;
}
.navbar__link:hover {
color: #212121;
}
.navbar__link_active {
font-weight: 700;
letter-spacing: 1.4px;
color: #212121;
border-bottom: 3px solid #212121;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<nav class="global-padding navbar clearfix">
<img src="{% static "img/logo.svg" %}" alt="Interior Logo">
<ul class="clearfix navbar__menu">
<li class="navbar__link-item">HOME</li>
<li class="navbar__link-item">PRODUCTS</li>
<li class="navbar__link-item">HISTORY</li>
<li class="navbar__link-item">SHOWROOM</li>
<li class="navbar__link-item">CONTACT</li>
<li class="navbar__link-item"><img src="{% static "img/search.svg" %}" alt="" class="navbar__search"></li>
</ul>
</nav>
<div class="container">
<p class="global-padding" style="margin-top: 20px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, ad tempore eaque autem at veritatis, modi a tenetur eius rem fugiat sunt esse! Placeat tempore quae quia eius alias! Ea officia modi cum sint pariatur architecto vero corrupti autem ex ratione asperiores commodi dolore fugiat, enim blanditiis quas accusamus sunt aperiam praesentium, accusantium excepturi? Ea, labore? Explicabo neque atque eveniet totam aperiam repellendus minima quia amet exercitationem laborum, quo tempore facilis dolores magni tenetur. Fuga nobis sit neque alias eos minima. Maiores quisquam soluta iure corrupti minima, ut enim error, ab nihil consectetur cupiditate, quod magni consequatur adipisci repudiandae architecto culpa suscipit! A minus omnis molestiae aut. Nam fugiat at, est voluptatem minus sint dolor commodi odio aperiam necessitatibus voluptatum ipsam nesciunt explicabo consequuntur nostrum hic, vitae eius blanditiis. Rem exercitationem, iure eligendi ullam accusamus, tempore impedit dignissimos perferendis quam iusto nulla molestias eos aliquam. Dolorum nisi atque nam! Iste vitae perferendis magni quos omnis impedit alias tenetur sed dolorem cupiditate totam sit nobis debitis blanditiis, cum ipsa, in earum ipsam. Asperiores atque molestiae fuga, quos tenetur repellat exercitationem magnam, voluptatibus aperiam dolore quisquam doloremque ratione perspiciatis autem in porro accusamus error accusantium iusto? Excepturi, pariatur repudiandae natus sed in totam voluptatibus laboriosam sint rerum nobis iusto quibusdam, perspiciatis alias ducimus quae dolorem eius, labore non ipsa quas. Tempore quis, beatae consequuntur explicabo asperiores eaque nisi ratione amet aliquid nesciunt atque? Enim laboriosam minima vero mollitia, quaerat porro facere laborum culpa molestiae perferendis? Quibusdam aut itaque, explicabo molestiae reprehenderit minima, et, soluta repellendus ipsam odio rem. Neque, dicta at voluptatum excepturi officiis vitae? Quidem debitis id sit amet recusandae facere rerum optio exercitationem necessitatibus cupiditate, illum magni ex reprehenderit fugiat culpa numquam maiores iste laudantium quasi ab neque! Quaerat consequuntur ipsa saepe quas perferendis consequatur neque rem pariatur corporis quia, enim eos dolorem reiciendis incidunt, ad architecto labore dignissimos adipisci sit in omnis cupiditate fuga? Blanditiis, maxime veniam quae ipsum labore ipsa quo necessitatibus, nostrum, magni omnis quidem voluptatum? Facilis vel reiciendis veniam consequatur dolorum minus! Blanditiis perferendis eveniet facilis. Assumenda corrupti libero eaque laborum labore expedita ab aperiam, neque fugiat id nesciunt dolore cupiditate reprehenderit, dignissimos distinctio ipsam. Minus sit, explicabo quae quos aliquam doloremque expedita consequuntur repellendus vel dicta? Dolorem aliquid placeat distinctio aperiam a aspernatur, ipsam quam minus doloribus, ad exercitationem quae? Ea iusto minus numquam fugiat inventore aspernatur perferendis temporibus pariatur nostrum cum eligendi, ab ratione modi similique quae rerum quasi tenetur dolor iure ut nemo molestias eveniet. Architecto soluta consequuntur optio quod, quos qui accusantium sit deserunt. Deleniti rerum explicabo sed. Voluptatibus, enim sit voluptas itaque quidem reiciendis asperiores quasi ipsum cumque consequuntur totam culpa suscipit natus repudiandae doloribus quas exercitationem veritatis sequi neque possimus qui voluptatum, nulla consectetur vel. Soluta reprehenderit perspiciatis debitis laboriosam, porro, possimus quis dolorem velit aperiam a aliquid blanditiis enim culpa dicta harum. Laborum reprehenderit enim est, eius laudantium quas ad molestias, quaerat debitis ullam quidem. Ut pariatur necessitatibus itaque at excepturi? Ratione, officiis amet repellat delectus recusandae eligendi quasi quidem esse similique quod at eum, placeat iure dignissimos magni modi debitis, nulla iusto facilis obcaecati ut. Sunt, delectus cumque aperiam exercitationem aut similique illum consectetur nostrum iusto iure aliquid impedit aspernatur dolore commodi. Asperiores saepe tempora architecto. Delectus dolorem distinctio obcaecati rerum eos eum fugiat ducimus, dignissimos, aperiam cupiditate non vel rem facere culpa eius doloribus laborum unde quod quos quae porro dolore natus. Et sed alias consectetur? Illo voluptatem possimus asperiores excepturi sed culpa dolore vitae est, esse laboriosam qui! Corporis, cupiditate ad tempore illo esse deleniti assumenda dignissimos mollitia eum odit dolores nostrum a odio maiores aperiam? Quisquam debitis perspiciatis expedita veritatis earum nemo modi eaque dolores nulla sapiente aperiam, assumenda magni quaerat iure nostrum cumque, repudiandae deleniti voluptatibus laborum! Perspiciatis quisquam aliquid nulla debitis doloremque, mollitia cumque ad totam quae suscipit, dolorum ratione perferendis consectetur magnam maxime facilis molestias quo impedit at asperiores, blanditiis et necessitatibus iure itaque. Ratione minus vero corporis mollitia velit ipsa quibusdam provident modi fugit suscipit, dolorem tempore? Recusandae ullam sit aspernatur sequi unde quas enim animi repellat perferendis rem nam praesentium, aperiam dicta eos temporibus quae! Laudantium placeat quibusdam consequuntur incidunt dolorem quia quos nulla sed aliquid accusantium quaerat consectetur obcaecati fugiat earum, laboriosam, inventore aspernatur amet at assumenda. Est dolore beatae non neque, ipsa ullam, perspiciatis laudantium ratione reiciendis vitae nobis veniam deleniti aliquam sapiente distinctio, voluptate enim praesentium fugiat libero repellat omnis ipsum. Veniam deserunt, ea in placeat distinctio facilis adipisci recusandae tempora iusto nisi excepturi sunt quae reprehenderit, tenetur enim, necessitatibus omnis et quisquam voluptate quia ipsum incidunt. Nisi sit ex mollitia aperiam nesciunt doloribus laborum rerum, dolorum deleniti asperiores ducimus maiores ea enim similique quas sunt? Sit fugit quibusdam adipisci culpa dolorum perferendis doloribus quo, placeat laboriosam expedita voluptatem totam dignissimos aspernatur aut soluta laborum! Repudiandae consequatur deleniti deserunt tempora error eveniet doloribus obcaecati, mollitia veritatis labore minima eum nihil ratione voluptate sit magni, voluptas quo exercitationem quia natus dolor. Cumque vitae ullam tempore hic fugiat esse a consequuntur libero asperiores minima cum earum repellat, ab, enim aliquam commodi saepe dolore nihil similique itaque laboriosam iure praesentium obcaecati! Eius, sed. In ipsam doloremque illum vel, sequi cupiditate, blanditiis dolores nihil aliquam veritatis facilis a impedit fugit cum, dolorum deleniti suscipit non velit laudantium ipsa maiores inventore nostrum animi? Error iusto, officiis saepe laborum nam repellat dolore aperiam ab deserunt distinctio quis amet vero, numquam obcaecati impedit quidem tempora corporis doloremque accusamus. Unde eveniet dolor quia maiores dolorem dicta. Veritatis nemo quos cum expedita doloribus, dolor recusandae soluta error, accusamus dolorum quis illo laudantium voluptatem aut repellendus optio, libero numquam eligendi enim totam distinctio. Sequi autem expedita eligendi vitae et quia dolorum adipisci. Expedita dolor tenetur, ipsa repellendus harum tempora aliquid delectus beatae quis ex cum sit sapiente hic deleniti incidunt ipsam repellat vitae. Porro distinctio, voluptatum rerum eius et corrupti fuga sapiente quia suscipit temporibus, nihil velit similique voluptatibus harum molestiae. Nemo, omnis quis facere ab nulla fuga tempore doloribus officia vitae commodi dolor, placeat voluptate beatae?
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
Try adding margin-right to your navbar_menu
.navbar_fixed .navbar__menu {
float: right;
list-style: none;
margin-right: 10%;
}
Trying to figure out how to compensate the height , when setting the header to fixed position.
Note that "headers" contains of both a top_bar and navigation. Added some opacity in the code snippet for better visibility.
I need to use CSS grid due to below code will be part of a financial report, therefore it is vital that everything layout wise is exactly on the position as planned.
What I have tried:
Added margin-top: 180px to both block_1 and block_2.
Result:
The text in block_1 and block_2 both goes up to top of page,
position itself as being stacked under the headers.
Wanted result:
The block_1 and block_2 should never get their text stacked under headers.
.wrapper {
display: grid;
grid-template:
"headers" 180px
"content" 2000px
/ 1fr;
}
.headers {
display: grid;
grid-template:
"top_bar" 100px
"navigation" 80px
/ 1fr;
}
.content {
display: grid;
grid-template:
"block_1" 1200px
"block_2" 1200px
/ 1fr;
}
.headers {
grid-area: headers;
position: fixed;
width: 100%;
opacity: 0.5;
}
.top_bar {
grid-area: top_bar;
background-color: black;
color: white;
padding: 10px 0 0 10px;
font-size: 150%;
}
.navigation {
grid-area: navigation;
padding: 10px 0 0 10px;
background-color: lightgrey;
}
.content {
grid-area: content;
background-color: pink;
}
.block_1 {
grid-area: block_1;
margin-top: 180px;
}
.block_2 {
grid-area: block_2;
margin-top: 180px;
}
<div class="wrapper">
<div class="headers">
<div class="top_bar">Header</div>
<div class="navigation">
<li>Block_1</li>
<li>Block_2</li>
</div>
</div>
<div class="content">
<div class="block_1" id="block_1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse repellendus eaque, commodi ea quisquam illum aperiam libero repudiandae, ex laboriosam sunt aspernatur voluptatum voluptate laborum recusandae. Recusandae perspiciatis molestiae dolorem dolore deleniti quisquam accusantium obcaecati. Deserunt illo nisi obcaecati facere ex illum hic consequatur? Repudiandae quod alias asperiores quas exercitationem officiis et nulla consequatur deserunt modi possimus veritatis minus vitae, veniam, iste ducimus sunt reiciendis saepe rerum? Quidem et atque ducimus eos cum, repudiandae, distinctio facere dignissimos fugiat voluptatibus, quae quam. Magni unde, delectus placeat commodi similique ipsam obcaecati iste laboriosam, autem numquam impedit explicabo omnis quo consequuntur tenetur doloribus error eveniet accusamus dolorem, quibusdam non reprehenderit! Unde illum sequi minima accusamus, iure, magni ipsam illo eius vitae, aut error voluptatem autem harum. Ea possimus autem numquam suscipit quasi facere similique quas, veritatis, at officiis neque odio consequuntur quia esse pariatur alias necessitatibus mollitia laboriosam, voluptas nam amet beatae eius! Cupiditate facere voluptatibus minus voluptas suscipit debitis, quae illo officiis enim saepe placeat rerum ut, sapiente dolore deleniti possimus, doloribus animi quo porro sint? Possimus natus laboriosam vel quas et. Voluptatem dolor a omnis neque, praesentium quas voluptates laudantium molestiae aliquam blanditiis esse natus nostrum deleniti quae, corporis delectus aliquid maiores sit et fuga atque odio. Placeat dicta esse, aspernatur dignissimos molestias hic facere consectetur quia veniam ratione iusto cupiditate dolorum suscipit non neque in magni dolorem nam odit perferendis similique labore! Doloribus et officia ad sed aspernatur minima quo quod omnis! Adipisci consequuntur, impedit in vel ratione, repellat dolor cupiditate. Quod nobis, dicta cumque eius illum. Sed eius eos similique soluta obcaecati nihil sunt. Harum, facilis magni. Quod totam soluta consectetur delectus nihil quas eveniet dolores ratione autem numquam quos suscipit animi similique eum nam voluptate illum debitis voluptates tenetur optio, alias inventore! Iure sapiente, earum. Rem, corporis officia.
</div>
<div class="block_2" id="block_2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate doloribus nesciunt quisquam nemo magnam facere voluptatum temporibus, voluptas rem. In voluptatem adipisci consequuntur rerum dolor sequi labore provident! Porro nesciunt expedita unde esse, illum animi eum molestias cupiditate provident, officia doloremque libero ipsum vel quod mollitia ab itaque quibusdam ex nihil quaerat. Nam veniam dolore recusandae dicta nisi odio voluptates porro nobis quam necessitatibus iusto alias, vero eligendi atque qui quis autem soluta quasi aperiam, excepturi saepe vitae eum eos, ab praesentium. Vitae suscipit eos quo. Consectetur dignissimos beatae odio quos, quidem, enim quo autem expedita sunt, deleniti quam blanditiis aspernatur quia non modi minus eveniet maiores corporis minima molestiae ipsa tempore eius vitae! Officiis suscipit dignissimos molestiae expedita, veniam nulla quis id consectetur fuga optio! Quis commodi excepturi quo perspiciatis nostrum impedit non nihil praesentium fugiat, odit, voluptate perferendis dolore architecto illum ipsum unde eligendi consectetur numquam sint inventore sit quibusdam! Voluptatibus quaerat amet ad fugiat error repellat dolorem, autem eos repellendus harum pariatur esse rem mollitia temporibus fuga, laborum numquam alias voluptas porro soluta reiciendis ipsum commodi! Dignissimos ratione consequatur nobis quam, adipisci magnam quasi repudiandae. Cumque qui fuga, nemo, tempore vero architecto deserunt perferendis nihil quibusdam optio autem, velit ipsum. Tempora commodi est eum. Ea adipisci, maiores quo aut. Dignissimos aut eligendi repudiandae dolores, distinctio excepturi tempore blanditiis voluptatibus autem. Repudiandae nam eius, ullam quam. Reprehenderit minus omnis sint, inventore fuga quisquam, iusto est quae, facilis deleniti beatae dignissimos. Consequuntur nostrum possimus facilis dolorem, molestiae delectus facere, rem ipsum, adipisci, explicabo vitae itaque. Nemo maxime ex sunt, mollitia dolore consequuntur odio numquam possimus deleniti ab nihil quis laborum, accusamus, iste vel et quae eum! Ullam quae non sit rerum vel, itaque fuga hic eum, expedita sequi, nihil ab facilis aut? Excepturi officia reprehenderit dignissimos, cupiditate sit obcaecati!
</div>
</div>
Do you really need all this gridstuff - in your snippet there is no apparent reason for it? If you can do without, this could be a solution:
* {
box-sizing: border-box;
}
.headers {
position: fixed;
width: 100%;
top: 0;
}
.top_bar {
background-color: black;
color: white;
padding: 10px 0 0 10px;
font-size: 150%;
height: 100px;
}
.navigation {
padding: 10px 0 0 10px;
background-color: lightgrey;
height: 80px;
}
.content {
background-color: pink;
}
.block_1 {
margin-top: 180px;
padding: 20px 0;
}
.block_2 {
margin-top: 20px;
}
<div class="wrapper">
<div class="headers">
<div class="top_bar">Header</div>
<div class="navigation">
<li>Block_1</li>
<li>Block_2</li>
</div>
</div>
<div class="content">
<div class="block_1" id="block_1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse repellendus eaque, commodi ea quisquam illum aperiam libero repudiandae, ex laboriosam sunt aspernatur voluptatum voluptate laborum recusandae. Recusandae perspiciatis molestiae dolorem dolore
deleniti quisquam accusantium obcaecati. Deserunt illo nisi obcaecati facere ex illum hic consequatur? Repudiandae quod alias asperiores quas exercitationem officiis et nulla consequatur deserunt modi possimus veritatis minus vitae, veniam, iste
ducimus sunt reiciendis saepe rerum? Quidem et atque ducimus eos cum, repudiandae, distinctio facere dignissimos fugiat voluptatibus, quae quam. Magni unde, delectus placeat commodi similique ipsam obcaecati iste laboriosam, autem numquam impedit
explicabo omnis quo consequuntur tenetur doloribus error eveniet accusamus dolorem, quibusdam non reprehenderit! Unde illum sequi minima accusamus, iure, magni ipsam illo eius vitae, aut error voluptatem autem harum. Ea possimus autem numquam suscipit
quasi facere similique quas, veritatis, at officiis neque odio consequuntur quia esse pariatur alias necessitatibus mollitia laboriosam, voluptas nam amet beatae eius! Cupiditate facere voluptatibus minus voluptas suscipit debitis, quae illo officiis
enim saepe placeat rerum ut, sapiente dolore deleniti possimus, doloribus animi quo porro sint? Possimus natus laboriosam vel quas et. Voluptatem dolor a omnis neque, praesentium quas voluptates laudantium molestiae aliquam blanditiis esse natus
nostrum deleniti quae, corporis delectus aliquid maiores sit et fuga atque odio. Placeat dicta esse, aspernatur dignissimos molestias hic facere consectetur quia veniam ratione iusto cupiditate dolorum suscipit non neque in magni dolorem nam odit
perferendis similique labore! Doloribus et officia ad sed aspernatur minima quo quod omnis! Adipisci consequuntur, impedit in vel ratione, repellat dolor cupiditate. Quod nobis, dicta cumque eius illum. Sed eius eos similique soluta obcaecati nihil
sunt. Harum, facilis magni. Quod totam soluta consectetur delectus nihil quas eveniet dolores ratione autem numquam quos suscipit animi similique eum nam voluptate illum debitis voluptates tenetur optio, alias inventore! Iure sapiente, earum. Rem,
corporis officia.
</div>
<div class="block_2" id="block_2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate doloribus nesciunt quisquam nemo magnam facere voluptatum temporibus, voluptas rem. In voluptatem adipisci consequuntur rerum dolor sequi labore provident! Porro nesciunt expedita unde
esse, illum animi eum molestias cupiditate provident, officia doloremque libero ipsum vel quod mollitia ab itaque quibusdam ex nihil quaerat. Nam veniam dolore recusandae dicta nisi odio voluptates porro nobis quam necessitatibus iusto alias, vero
eligendi atque qui quis autem soluta quasi aperiam, excepturi saepe vitae eum eos, ab praesentium. Vitae suscipit eos quo. Consectetur dignissimos beatae odio quos, quidem, enim quo autem expedita sunt, deleniti quam blanditiis aspernatur quia non
modi minus eveniet maiores corporis minima molestiae ipsa tempore eius vitae! Officiis suscipit dignissimos molestiae expedita, veniam nulla quis id consectetur fuga optio! Quis commodi excepturi quo perspiciatis nostrum impedit non nihil praesentium
fugiat, odit, voluptate perferendis dolore architecto illum ipsum unde eligendi consectetur numquam sint inventore sit quibusdam! Voluptatibus quaerat amet ad fugiat error repellat dolorem, autem eos repellendus harum pariatur esse rem mollitia
temporibus fuga, laborum numquam alias voluptas porro soluta reiciendis ipsum commodi! Dignissimos ratione consequatur nobis quam, adipisci magnam quasi repudiandae. Cumque qui fuga, nemo, tempore vero architecto deserunt perferendis nihil quibusdam
optio autem, velit ipsum. Tempora commodi est eum. Ea adipisci, maiores quo aut. Dignissimos aut eligendi repudiandae dolores, distinctio excepturi tempore blanditiis voluptatibus autem. Repudiandae nam eius, ullam quam. Reprehenderit minus omnis
sint, inventore fuga quisquam, iusto est quae, facilis deleniti beatae dignissimos. Consequuntur nostrum possimus facilis dolorem, molestiae delectus facere, rem ipsum, adipisci, explicabo vitae itaque. Nemo maxime ex sunt, mollitia dolore consequuntur
odio numquam possimus deleniti ab nihil quis laborum, accusamus, iste vel et quae eum! Ullam quae non sit rerum vel, itaque fuga hic eum, expedita sequi, nihil ab facilis aut? Excepturi officia reprehenderit dignissimos, cupiditate sit obcaecati!
</div>
</div>
I am trying to get the thead and tfoot to appear on the top and bottom of each page when I print. The problem is that if the tbody content is not the correct height then the tfoot could be only half way down the page instead of at the bottom.
I've tried making the table as divs and making it display:table so I could position it.
http://jsfiddle.net/zfw5F/
HTML
<div class="wrapper">
<div class="print_options">
<i class="icon-remove"></i> Close
|
<i class="icon-copy"></i> PDF
|
<i class="icon-print"></i> Print
</div> <!-- print_options -->
<table class="print_page">
<thead>
<tr>
<td>
<div class="print_header">
<div class="print_header_logo">
<h1 class="showhouse-text">Laagro</h1>
</div>
<div class="print_header_address">
<p>
New Somewhere House <br>
123 Somewhere Avenue <br>
Newry <br>
Down <br>
BT35 ABC <br>
UK
</p>
</div>
</div>
</td>
</tr>
</thead> <!-- thead -->
<tbody>
<tr>
<td>
Dear John, <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, laboriosam, ut, reiciendis quidem explicabo ipsum accusantium molestias nihil sint cumque eos repellendus rem excepturi rerum hic dolorum at iusto vel numquam accusamus nemo aut facilis blanditiis quasi quaerat nobis quisquam nisi inventore ex. Iusto, a, molestiae aliquam hic labore officia quae non ipsam libero obcaecati explicabo totam pariatur doloribus quasi mollitia! Reiciendis, excepturi, alias, quisquam commodi ducimus mollitia in iste harum facere consequatur animi doloribus accusantium quia blanditiis maiores voluptatibus architecto ex laborum modi eaque. Veritatis, explicabo deserunt consequatur cum quibusdam repudiandae rerum consequuntur at quia aut. Vero, architecto, porro, quis, molestias consequuntur possimus ipsa sint expedita asperiores quibusdam eius maiores explicabo quia hic molestiae magni deserunt fugit numquam provident fugiat. Accusamus, excepturi totam eveniet neque delectus hic quasi! Obcaecati, pariatur, dolor, voluptates recusandae cum ipsa sapiente id corporis quam totam laboriosam quia et omnis. Exercitationem excepturi corrupti repellat quis omnis. Illo, labore, quae rerum dicta atque ex maxime at incidunt aliquam libero ea delectus beatae ab veniam repellat amet architecto sunt dignissimos. Officiis, architecto, voluptatum, mollitia, iusto odit eaque error autem est quaerat quo deserunt sequi vel totam enim nostrum sunt fuga sint laudantium ab assumenda ex nobis earum. Ea explicabo dolorum quidem nostrum dicta architecto rerum. Suscipit, libero, delectus culpa unde officiis itaque magnam exercitationem eius aliquid tempora! Hic, officia, perspiciatis fugiat adipisci veniam consequuntur quasi expedita quae dolores assumenda officiis quo ex voluptas iure nobis dolorum aliquam dignissimos magni nesciunt quia ipsa debitis molestias nulla. Doloremque, assumenda, quae nulla magni atque dolorem sequi adipisci illum dolores. Aperiam, blanditiis sit asperiores excepturi vel deserunt vitae exercitationem fugiat quos nobis dolore laudantium beatae animi officiis praesentium obcaecati odio fuga quasi voluptate eius fugit tenetur incidunt quas rem tempora quidem placeat doloribus harum necessitatibus repellat at consequuntur alias aut. Quidem, ut itaque quod. Natus, magnam, deleniti dolores necessitatibus omnis dolore aut dolorem doloremque autem libero cupiditate explicabo voluptas delectus laboriosam ad sint voluptate ea quae fugit repellendus? Sunt, doloribus eum autem soluta vero fugiat obcaecati dolore repellendus placeat laudantium? Velit, quis, dicta ipsam accusamus repudiandae aliquid tempore sed tenetur ipsum modi consequatur architecto doloribus unde? Numquam, quasi laudantium atque tenetur ab voluptatibus ipsa velit magnam aliquam. A, non officia velit aliquid fugiat odit error commodi. Aliquam, laudantium placeat sequi incidunt sit consectetur vitae rerum! Iste, id, quos aspernatur assumenda optio odio accusamus quas tenetur fugiat aliquid tempora facilis eos asperiores sint nisi ipsum molestiae quis? Impedit, eos, eius ad iusto natus accusantium quam nobis. Maxime, distinctio est nulla ab delectus sequi voluptatum. Amet, iure aliquam cupiditate deserunt consectetur quod iusto sed mollitia! Velit, labore, provident, saepe, soluta ducimus deserunt officiis consectetur dignissimos maiores quas alias deleniti eaque iure nostrum non excepturi quos nobis veritatis corporis qui cupiditate quo tenetur molestias ab odio itaque quidem mollitia porro dolores eius dicta ipsum vero culpa sequi incidunt voluptas accusamus commodi beatae iste laudantium reprehenderit dolorem vitae voluptates hic et ratione? Qui, culpa, fugiat voluptas blanditiis optio minus tempore aperiam nulla cum pariatur autem saepe maiores enim. Aspernatur, totam modi deleniti voluptatem eum est harum architecto dolores. Nisi, autem, culpa magni corporis vitae odio non impedit doloribus soluta blanditiis fuga fugiat itaque atque laboriosam voluptate officia omnis. Veritatis, consequuntur maiores id soluta recusandae tempore unde odio accusamus tenetur iusto rem perferendis ullam ad sunt excepturi ratione perspiciatis inventore itaque harum amet! Nihil, ut, modi, autem alias aliquid porro sunt iure perferendis ad nemo a mollitia quae debitis ex doloribus hic fuga nesciunt culpa unde error cumque id labore ea nisi adipisci atque explicabo! Consectetur, aliquid, fugit, obcaecati, voluptatibus nisi aperiam quo itaque molestiae modi nobis eligendi vel totam eveniet consequuntur ab corporis expedita reiciendis quasi rem quia ullam non ea accusantium ratione porro nesciunt eius dolor tenetur officia praesentium harum sed a tempore magni odio suscipit soluta. Beatae, vero, cumque, voluptas, mollitia libero ad eveniet optio velit tenetur est asperiores natus commodi maiores modi odio maxime laborum doloribus quasi. Doloribus, laudantium, eius saepe perspiciatis voluptas fugiat ipsam deleniti repellendus harum doloremque ullam ducimus asperiores quas est reiciendis ut quaerat earum laborum delectus voluptates exercitationem nisi illum enim mollitia iste assumenda quod vel ad aut at totam iure expedita quia! Officia, architecto, vel, laborum, accusantium assumenda quae odio molestiae aut molestias maxime harum voluptatem recusandae vitae animi doloremque hic illum eaque tenetur optio reprehenderit nihil ullam provident natus labore voluptate iure quia aspernatur numquam ipsum corrupti distinctio debitis in omnis. Esse, placeat, cupiditate at eius vitae accusantium commodi quisquam magni vero nulla? Illum commodi laudantium quibusdam nobis officiis! Atque, eos, quia, eum dicta consectetur velit ratione quos asperiores nobis aperiam provident ipsum corporis quae! In, ullam, nobis, dolor, blanditiis similique ipsam officiis quos reprehenderit dolorum tempora earum assumenda impedit adipisci sed quibusdam eaque laborum facilis totam cumque ratione rerum repellat sapiente dignissimos nihil culpa. Delectus, natus, doloremque, eos, ea quae at voluptate corrupti ut hic asperiores itaque minus maiores laborum vel dolores magni incidunt tempore temporibus veniam voluptates soluta sunt doloribus mollitia voluptatum odio animi quibusdam fuga rerum laudantium inventore repellendus numquam ratione atque ipsam iste voluptatem commodi id. Ex, ipsam, dolor quasi adipisci perspiciatis excepturi eos dignissimos vitae iure culpa minus minima magni. Voluptatem, voluptatum ipsa molestias modi ducimus cum tempore explicabo rem. Tempore, aperiam, maxime, nostrum ut minima autem quae velit possimus amet quam est adipisci deleniti ea ad architecto. Porro, quisquam, saepe temporibus molestiae natus similique fugit dolore distinctio suscipit iste odio rem reiciendis deleniti sed enim. Cumque, voluptas, soluta numquam perspiciatis suscipit commodi ducimus odio odit veniam magni impedit adipisci amet quis doloribus dignissimos unde reprehenderit ad incidunt in dolore fugit delectus corporis tenetur officia illo sed distinctio fuga accusantium error pariatur voluptatibus explicabo eligendi dolorum! Ipsa, saepe asperiores voluptates velit quam quae illo necessitatibus temporibus exercitationem perferendis nobis facere. Veniam, fuga consectetur officiis molestias nam ex deleniti aperiam placeat provident debitis tempora soluta ducimus voluptatum blanditiis tempore. Blanditiis, soluta, ad officia eos voluptatum tenetur dolorum aliquid sit atque eum voluptas fugiat explicabo nulla illum consequatur necessitatibus animi amet alias doloremque.
</td>
</tr>
</tbody> <!-- tbody -->
<tfoot>
<tr>
<td>
<div class="print_footer">
<div class="print_footer_left">
<p>Company Reg No. 045 AB6</p>
</div>
<div class="print_footer_right">
<p>Registered Office Address: 123 Somewhere Avenue, </p>
</div>
</div>
</td>
</tr>
</tfoot> <!-- tfoot -->
</table> <!-- table -->
</div> <!-- wrapper -->
CSS
.wrapper{
width: 21cm;
margin: auto;
}
.print_options{
float: right;
}
.print_page{
background: white;
font-size: 12pt;
float: left;
padding: 10px;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.print_header{
float: left;
clear: both;
width: 100%;
}
.print_header_logo{
float: left;
}
.print_header_address{
float: right;
text-align: right;
font-size: 0.7em;
margin: 1.5em 0 0 0;
}
.print_footer{
float: left;
width: 100%;
margin: 1em 0 0 0;
font-size: 0.9em;
}
.print_footer_left{
float: left;
}
.print_footer_right{
float: right;
text-align: right;
}
#page{
margin: 0;
}
#media print {
.wrapper{width: 90%; margin: auto; position: relative;}
thead { display: table-header-group; }
tfoot { display: table-footer-group;}
.print_page{border: none; box-shadow: none;}
.print_options{display: none;}
}
i just went through the code. Its fine. The only thing you are missing is, min-height.
Providing min-height will get your need fulfilled.