Related
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%;
}
I have a sticky footer layout, where the footer is always positioned at the bottom of the page (even if there is no content).
Everything works in all major browsers, but I have this weird issue in IE11: when I use a big image, it has non-wanted space between the end of the content, and the footer. (Looks like the image is displayed correctly, but the height isn't calculated correctly by the browser?)
This is how it should be:
* {
padding: 0;
margin: 0;
}
.site {
/*
Old IE flexbox syntax is not needed anymore for IE11 (https://caniuse.com/#search=flexbox)
display: -ms-flexbox;
*/
}
.site__container {
display: flex;
flex-direction: column;
/*In IE11, the parent element needs a height to be able to put the footer at the bottom.
(height value doesn't matter, it just needs height. example: "height: 0;")
(https://stackoverflow.com/questions/24396205/flex-grow-not-working-in-internet-explorer-11)
*/
height: 0;
min-height: 100vh;
}
.site__main {
flex: 1 0 auto;
/* Setting flex-grow: 1 on main makes it grow to fill the available space. */
}
.site__header,
.site__main,
.site__footer {
/* By default, flex-shrink is set to 1. This makes the items shrink
if there is not enough space, which happens if the content is larger than the screen.
*/
flex-shrink: 0;
}
.site__content {
padding-bottom: 30px;
}
.site__content p {
line-height: 25px;
}
.site__header {
background: red;
}
.site__main {
background: green;
}
.site__footer {
background: blue;
}
section {
/* height: 30px; */
background: salmon;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="site__container">
<header class="site__header">Header</header>
<main class="site__main">
<section>
<div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<img src="https://placehold.it/500x300" alt="" class="img-fluid">
</div>
<div class="col-12 col-md-6">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo sed molestias voluptatum perferendis ea nisi minus, illo iusto ut quaerat saepe sunt asperiores itaque pariatur earum incidunt quos culpa vero excepturi magni quod corrupti aperiam doloremque?
Esse rerum officia modi consequatur? Ex aspernatur repellat id, ut aut nam? Esse, aut?
</div>
</div>
</div>
</div>
</div>
</section>
<section><div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
</div>
</div>
</div>
</div>
</div></section>
<section><div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
</div>
</div>
</div>
</div>
</div></section>
</main>
<footer class="site__footer">Footer</footer>
</div>
</body>
</html>
When I use the above example, and replace the image url by https://placehold.it/5000x3000, the green area gets much bigger and gives an unwanted padding between the content & footer, despite there being no content in there. (Remember, this issue is only in IE11, no other browsers)
Simply remove the display:flex and flex-direction:column property for your site__container class. Because internet explorer does not support the flex-direction properties.
Read the reference
* {
padding: 0;
margin: 0;
}
html {
position: relative;
min-height: 100%;
}
.site {
/*
Old IE flexbox syntax is not needed anymore for IE11 (https://caniuse.com/#search=flexbox)
display: -ms-flexbox;
*/
}
.site__container {
/*display: flex;
flex-direction: column;
height: 0;
min-height: 100vh;*/
/*In IE11, the parent element needs a height to be able to put the footer at the bottom.
(height value doesn't matter, it just needs height. example: "height: 0;")
(https://stackoverflow.com/questions/24396205/flex-grow-not-working-in-internet-explorer-11)
*/
margin-bottom: 60px;
}
.site__main {
flex: 1 0 auto;
/* Setting flex-grow: 1 on main makes it grow to fill the available space. */
}
.site__header,
.site__main,
.site__footer {
/* By default, flex-shrink is set to 1. This makes the items shrink
if there is not enough space, which happens if the content is larger than the screen.
*/
flex-shrink: 0;
}
.site__content {
padding-bottom: 30px;
}
.site__content p {
line-height: 25px;
}
.site__header {
background: red;
}
.site__main {
background: green;
}
.site__footer {
background: blue;
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
section {
/* height: 30px; */
background: salmon;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="site__container">
<header class="site__header">Header</header>
<main class="site__main">
<section>
<div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<img src="https://placehold.it/5000x3000" alt="" class="img-fluid">
</div>
<div class="col-12 col-md-6">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo sed molestias voluptatum perferendis ea nisi minus, illo iusto ut quaerat saepe sunt asperiores itaque pariatur earum incidunt quos culpa vero excepturi magni quod corrupti aperiam doloremque?
Esse rerum officia modi consequatur? Ex aspernatur repellat id, ut aut nam? Esse, aut?
</div>
</div>
</div>
</div>
</div>
</section>
<section><div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
</div>
</div>
</div>
</div>
</div></section>
<section><div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
</div>
</div>
</div>
</div>
</div></section>
</main>
<footer class="site__footer">Footer</footer>
</div>
</body>
</html>
This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Allowing for overflow on the y-axis while hiding overflow on the x-axis [duplicate]
(1 answer)
Closed 5 years ago.
There is an element having fixed height on my DOM with height more than body and html document and page is scrollable but its impacting my content. If you disable overflow-x either on html or body, it will work fine. Not able to figure out how overflow-x is impacting overflow-y condition.
As per below code snippet, the content of second column is hidden half way due to oveflow-x property on html or body.
Using below css on page.
body, html{
overflow-x: hidden;
height: 100%;
}
canvas {
background: #000;
display: block !important;
border: 0;
margin: 0;
width: 100% !important;
height: 100% !important;
padding: 0;
max-width: 100% !important;
max-height: 100% !important;
}
body, html{
height: 100%;
overflow-x: hidden;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="height:100%; margin: 0; padding: 0; ">
<div class="row">
<div class="col col-xs-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus atque iusto laboriosam perspiciatis praesentium. Aliquam at atque beatae blanditiis consequuntur delectus earum eius eveniet excepturi fuga fugit hic id illo laboriosam natus nobis non
omnis, pariatur praesentium quidem repudiandae sapiente ullam ut vel veritatis voluptas voluptatibus. A asperiores at consequatur culpa dolorem eaque eligendi exercitationem facere fuga fugiat fugit, hic in inventore iure minima necessitatibus
nisi non, numquam officiis praesentium quas quis reiciendis rerum voluptatibus voluptatum. Animi debitis eveniet maxime nostrum temporibus! Alias, aliquam amet animi at blanditiis consectetur corporis culpa dolor dolore doloremque ea earum exercitationem
facere harum, hic illo in itaque labore laborum libero natus nemo obcaecati optio quas rem repellendus vitae? At deleniti dignissimos id in magnam nisi nulla omnis, perferendis, quis reprehenderit sint, voluptatibus. Cum ducimus hic impedit magni
modi necessitatibus nihil quibusdam tenetur ullam vitae. Facilis illum inventore mollitia nihil non omnis reprehenderit unde? Accusantium animi aspernatur, dolorum, earum expedita illum iusto obcaecati, officia provident qui unde ut. Accusantium
aperiam at atque consequatur culpa deleniti dicta dolorum explicabo fuga fugiat, hic id laborum minus molestiae nobis pariatur repellat rerum saepe sed sint soluta temporibus voluptates voluptatum. Ab, possimus, soluta. A accusantium asperiores
cumque cupiditate deleniti deserunt distinctio dolor ducimus ea eius eos id iure labore laboriosam laborum, magnam magni molestiae non nostrum officia quia quibusdam quidem suscipit ut vel velit veritatis vitae? Facere facilis laboriosam optio
perspiciatis quidem quod reprehenderit similique, sunt tempora voluptas. Ad animi cupiditate deleniti dolore dolorem earum est harum itaque iusto laborum magnam nostrum numquam odit provident quod quos, ratione recusandae saepe sequi similique
tenetur totam ullam. Commodi ipsum nisi obcaecati porro praesentium. Accusantium ad adipisci alias asperiores, aspernatur consequatur consequuntur deserunt dicta dignissimos dolore dolorem doloremque, error eveniet fugiat laboriosam laborum magnam,
molestiae optio pariatur quis quo rem sint voluptatem?
</div>
<div class="col col-xs-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores minima natus nostrum numquam odit quaerat, ratione sed sit. Architecto, aspernatur autem dolor doloribus eveniet explicabo perspiciatis quam quidem quos! At blanditiis consequatur consequuntur
deleniti dignissimos dolorem dolorum eius explicabo fugiat illo in ipsa necessitatibus nostrum omnis quis quisquam quod quos ratione repellat sed sint temporibus, voluptates. Amet, animi architecto aut, deleniti deserunt dolores et expedita iusto
libero magnam magni, perspiciatis possimus quos recusandae repudiandae sapiente sit voluptatem. Accusamus aliquam architecto asperiores aut, delectus deleniti eaque eum fugit harum incidunt maxime molestiae quidem quod voluptatem voluptates. Accusamus
alias aliquam amet architecto assumenda atque commodi cumque deserunt dicta ducimus, esse harum ipsum itaque iusto labore laboriosam magnam magni maiores minus neque nisi officiis, omnis optio possimus provident quaerat quam quasi quo recusandae
reiciendis repellat sapiente sequi sunt tenetur vel voluptates voluptatum! A adipisci, assumenda aut cumque dicta doloribus eos ex harum iste magni minus mollitia odit officiis repudiandae similique ullam ut velit voluptate. Amet architecto id
nobis similique! Amet atque deleniti magnam quam quisquam, unde vel veritatis? Commodi laborum, maiores minus molestiae placeat quaerat sequi vero. Ab accusantium autem consequuntur deleniti dicta doloribus et facilis harum impedit in, incidunt
nam neque, nobis nostrum numquam quam quasi quia soluta, voluptate voluptates? Accusamus aut magnam minima officia voluptatum? A ab aliquam aut beatae consequatur debitis dignissimos dolor doloribus eaque earum eius enim eos exercitationem expedita
hic inventore ipsum itaque maxime nisi non obcaecati officia officiis perferendis praesentium quas repellat repellendus, similique unde, vel voluptate? Accusantium aliquam aliquid assumenda atque aut beatae debitis dicta, dolores doloribus ducimus
earum, eligendi exercitationem id impedit inventore laborum laudantium libero minima minus molestias nemo nostrum numquam obcaecati odit officia praesentium quasi quis reiciendis repellendus reprehenderit, rerum similique soluta temporibus? Ad
architecto aspernatur assumenda consectetur cupiditate debitis dolores doloribus enim error excepturi explicabo facere facilis fugiat id, illo ipsum laboriosam odio, porro quae quaerat quam quas quasi quisquam quod sint ut voluptatem? Animi architecto
cupiditate debitis dicta doloribus dolorum eaque earum eum expedita, fugiat harum illo iusto laboriosam laborum minima, molestiae natus pariatur perferendis perspiciatis praesentium quia quidem reiciendis reprehenderit sequi soluta suscipit tempora
vero? Ducimus exercitationem expedita explicabo facilis fugiat in ipsam iste iusto laudantium magnam natus optio, quod ratione rem, sed. Aspernatur assumenda facere libero obcaecati officiis pariatur provident quam quos repudiandae! Eveniet provident,
quo. Ab aliquid amet animi commodi corporis, cupiditate debitis dolor doloremque est ex fugiat id illum ipsam ipsum iste iure iusto laboriosam modi molestiae mollitia nam nisi nostrum nulla omnis placeat praesentium quas quia quibusdam quo quod
quos ratione repellat, sit tempora tempore veritatis voluptates. Ab accusantium aperiam, asperiores aut beatae cumque cupiditate delectus dolore eaque enim, libero minima, nemo nesciunt nulla qui quis ratione rem reprehenderit sapiente sed tempora
temporibus ut. Delectus, laudantium nam necessitatibus non pariatur quae. Aut culpa debitis explicabo facilis ipsam nam rem repellendus. Adipisci aliquam aut autem debitis deserunt distinctio dolore ducimus eaque expedita in ipsum libero nesciunt,
odit, officia perspiciatis, ratione recusandae reiciendis rem tempore temporibus totam voluptas.
</div>
</div>
<div>
<div style="z-index: 2147483642; top: 0px; left: 0px; position: absolute; opacity: 0.3;
width: 100vw; height: 10351px; display: block;">
<canvas width="100vw" height="10351" style="position: absolute; top: 0px; left: 0px; z-index: 1000000;"></canvas>
</div>
</div>
</div>
</body>
</html>
Note: I am looking for explanation of this issue (as why this is happening so that I can learn for future) not the fix of the issue. (by hit and trial different css fields).
I think there is no need to give overflow-x: hidden to the html, please have a look at the code.
canvas {
background: #000;
display: block !important;
border: 0;
margin: 0;
width: 100% !important;
height: 100% !important;
padding: 0;
max-width: 100% !important;
max-height: 100% !important;
}
body{
height: 100%;
overflow-x: hidden;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="height:100%; margin: 0; padding: 0; ">
<div class="row">
<div class="col col-xs-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus atque iusto laboriosam perspiciatis praesentium. Aliquam at atque beatae blanditiis consequuntur delectus earum eius eveniet excepturi fuga fugit hic id illo laboriosam natus nobis non
omnis, pariatur praesentium quidem repudiandae sapiente ullam ut vel veritatis voluptas voluptatibus. A asperiores at consequatur culpa dolorem eaque eligendi exercitationem facere fuga fugiat fugit, hic in inventore iure minima necessitatibus
nisi non, numquam officiis praesentium quas quis reiciendis rerum voluptatibus voluptatum. Animi debitis eveniet maxime nostrum temporibus! Alias, aliquam amet animi at blanditiis consectetur corporis culpa dolor dolore doloremque ea earum exercitationem
facere harum, hic illo in itaque labore laborum libero natus nemo obcaecati optio quas rem repellendus vitae? At deleniti dignissimos id in magnam nisi nulla omnis, perferendis, quis reprehenderit sint, voluptatibus. Cum ducimus hic impedit magni
modi necessitatibus nihil quibusdam tenetur ullam vitae. Facilis illum inventore mollitia nihil non omnis reprehenderit unde? Accusantium animi aspernatur, dolorum, earum expedita illum iusto obcaecati, officia provident qui unde ut. Accusantium
aperiam at atque consequatur culpa deleniti dicta dolorum explicabo fuga fugiat, hic id laborum minus molestiae nobis pariatur repellat rerum saepe sed sint soluta temporibus voluptates voluptatum. Ab, possimus, soluta. A accusantium asperiores
cumque cupiditate deleniti deserunt distinctio dolor ducimus ea eius eos id iure labore laboriosam laborum, magnam magni molestiae non nostrum officia quia quibusdam quidem suscipit ut vel velit veritatis vitae? Facere facilis laboriosam optio
perspiciatis quidem quod reprehenderit similique, sunt tempora voluptas. Ad animi cupiditate deleniti dolore dolorem earum est harum itaque iusto laborum magnam nostrum numquam odit provident quod quos, ratione recusandae saepe sequi similique
tenetur totam ullam. Commodi ipsum nisi obcaecati porro praesentium. Accusantium ad adipisci alias asperiores, aspernatur consequatur consequuntur deserunt dicta dignissimos dolore dolorem doloremque, error eveniet fugiat laboriosam laborum magnam,
molestiae optio pariatur quis quo rem sint voluptatem?
</div>
<div class="col col-xs-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores minima natus nostrum numquam odit quaerat, ratione sed sit. Architecto, aspernatur autem dolor doloribus eveniet explicabo perspiciatis quam quidem quos! At blanditiis consequatur consequuntur
deleniti dignissimos dolorem dolorum eius explicabo fugiat illo in ipsa necessitatibus nostrum omnis quis quisquam quod quos ratione repellat sed sint temporibus, voluptates. Amet, animi architecto aut, deleniti deserunt dolores et expedita iusto
libero magnam magni, perspiciatis possimus quos recusandae repudiandae sapiente sit voluptatem. Accusamus aliquam architecto asperiores aut, delectus deleniti eaque eum fugit harum incidunt maxime molestiae quidem quod voluptatem voluptates. Accusamus
alias aliquam amet architecto assumenda atque commodi cumque deserunt dicta ducimus, esse harum ipsum itaque iusto labore laboriosam magnam magni maiores minus neque nisi officiis, omnis optio possimus provident quaerat quam quasi quo recusandae
reiciendis repellat sapiente sequi sunt tenetur vel voluptates voluptatum! A adipisci, assumenda aut cumque dicta doloribus eos ex harum iste magni minus mollitia odit officiis repudiandae similique ullam ut velit voluptate. Amet architecto id
nobis similique! Amet atque deleniti magnam quam quisquam, unde vel veritatis? Commodi laborum, maiores minus molestiae placeat quaerat sequi vero. Ab accusantium autem consequuntur deleniti dicta doloribus et facilis harum impedit in, incidunt
nam neque, nobis nostrum numquam quam quasi quia soluta, voluptate voluptates? Accusamus aut magnam minima officia voluptatum? A ab aliquam aut beatae consequatur debitis dignissimos dolor doloribus eaque earum eius enim eos exercitationem expedita
hic inventore ipsum itaque maxime nisi non obcaecati officia officiis perferendis praesentium quas repellat repellendus, similique unde, vel voluptate? Accusantium aliquam aliquid assumenda atque aut beatae debitis dicta, dolores doloribus ducimus
earum, eligendi exercitationem id impedit inventore laborum laudantium libero minima minus molestias nemo nostrum numquam obcaecati odit officia praesentium quasi quis reiciendis repellendus reprehenderit, rerum similique soluta temporibus? Ad
architecto aspernatur assumenda consectetur cupiditate debitis dolores doloribus enim error excepturi explicabo facere facilis fugiat id, illo ipsum laboriosam odio, porro quae quaerat quam quas quasi quisquam quod sint ut voluptatem? Animi architecto
cupiditate debitis dicta doloribus dolorum eaque earum eum expedita, fugiat harum illo iusto laboriosam laborum minima, molestiae natus pariatur perferendis perspiciatis praesentium quia quidem reiciendis reprehenderit sequi soluta suscipit tempora
vero? Ducimus exercitationem expedita explicabo facilis fugiat in ipsam iste iusto laudantium magnam natus optio, quod ratione rem, sed. Aspernatur assumenda facere libero obcaecati officiis pariatur provident quam quos repudiandae! Eveniet provident,
quo. Ab aliquid amet animi commodi corporis, cupiditate debitis dolor doloremque est ex fugiat id illum ipsam ipsum iste iure iusto laboriosam modi molestiae mollitia nam nisi nostrum nulla omnis placeat praesentium quas quia quibusdam quo quod
quos ratione repellat, sit tempora tempore veritatis voluptates. Ab accusantium aperiam, asperiores aut beatae cumque cupiditate delectus dolore eaque enim, libero minima, nemo nesciunt nulla qui quis ratione rem reprehenderit sapiente sed tempora
temporibus ut. Delectus, laudantium nam necessitatibus non pariatur quae. Aut culpa debitis explicabo facilis ipsam nam rem repellendus. Adipisci aliquam aut autem debitis deserunt distinctio dolore ducimus eaque expedita in ipsum libero nesciunt,
odit, officia perspiciatis, ratione recusandae reiciendis rem tempore temporibus totam voluptas.
</div>
</div>
<div>
<div style="z-index: 2147483642; top: 0px; left: 0px; position: absolute; opacity: 0.3;
width: 100vw; height: 10351px; display: block;">
<canvas width="100vw" height="10351" style="position: absolute; top: 0px; left: 0px; z-index: 1000000;"></canvas>
</div>
</div>
</div>
</body>
</html>
Whenever you set the height of the html and body elements by using css height: 100%; property, it'll tell the browser, "Ok, just get body element's height as your(browser's) viewport height!". You can see it clearly by using Chrome's inspect element tool and play with the browser window height. Every time you adjust the browser's window height, the pixel height of the body element will vary accordingly.
overflow-x: hidden; on the body and html tag is not the issue. basically, overflow-x: hidden; property will hide the verticle contents which exceeds the parent element's width but not the horizontal way. In this case, whatever the content exceeds the verticle width of the body or html will not be shown.
The actual problem was, as I guess, the height: 100%; property of the body and html tags. Consider removing that as bellow.
html, body {
/*height: 100%;*/
overflow-x: hidden;
}
This will secure you, I guess.
I am looking to print a header and footer on each page that gets printed. The user creates a letter or report and when goes to view it the letter will appear in the browser. From there the user can print it off. The options buttons at the top disappear and the border is removed. Howerver if the content is long enough I want the header and footer to print on each page with the content continuing. I can get the print working ok and to the right dimensions.
http://jsfiddle.net/g7bqG/
<div class="print_wrapper">
<div class="print_options">
<i class="icon-remove"></i> Close
|
<i class="icon-copy"></i> PDF
|
<i class="icon-print"></i> Print
</div>
<div class="print_page">
<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>
<div class="print_content">
<p>Dear Bob</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, repellat, magni, deleniti placeat obcaecati voluptatem alias voluptate laudantium necessitatibus voluptatum dolorem quod earum quo sapiente magnam atque non animi enim natus voluptatibus beatae debitis ipsa. Facilis atque aperiam id nobis perspiciatis debitis dolorum architecto reprehenderit. Cupiditate, illo asperiores animi enim ad velit culpa dolorem nesciunt similique tempora perspiciatis facilis doloremque saepe id consequatur!</p>
<p>Numquam, quam, aut beatae impedit id dolore doloribus sequi voluptatibus ad quae aspernatur similique vero vel qui ipsum fugit magnam non enim itaque hic. Reiciendis, possimus, magni, ex ea aliquid at optio molestias placeat ab blanditiis ipsum obcaecati cum excepturi quidem neque tempora eum odio voluptatem ipsam officiis quisquam harum quibusdam numquam pariatur sapiente et inventore sit in voluptatibus veritatis doloremque id aut aliquam. Incidunt, atque, minima labore iste cumque ad pariatur qui possimus ut libero inventore corporis perspiciatis nam voluptatem temporibus fugiat impedit culpa dolorem quo provident placeat amet delectus reiciendis rerum repudiandae quisquam similique quis aspernatur in voluptas optio at nulla aliquam numquam beatae dolores ab sint architecto molestiae sapiente commodi quam officiis quas veniam repellendus suscipit! Sequi, voluptate sapiente assumenda commodi. Maxime, nobis, corporis, doloremque, fugit modi sint iste aliquam maiores sequi voluptatum libero doloribus illum placeat nisi tempora natus aliquid. Harum, eius consequuntur asperiores.</p>
<p>Recusandae, error, aperiam totam laborum magnam distinctio architecto numquam quae nostrum fuga reprehenderit tenetur minima excepturi itaque vel pariatur rem suscipit ex. Repellendus ipsa placeat deleniti rerum praesentium voluptatibus sapiente nihil quidem magni. Quos, sapiente ea deserunt asperiores molestiae?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, repellat, magni, deleniti placeat obcaecati voluptatem alias voluptate laudantium necessitatibus voluptatum dolorem quod earum quo sapiente magnam atque non animi enim natus voluptatibus beatae debitis ipsa. Facilis atque aperiam id nobis perspiciatis debitis dolorum architecto reprehenderit. Cupiditate, illo asperiores animi enim ad velit culpa dolorem nesciunt similique tempora perspiciatis facilis doloremque saepe id consequatur!</p>
<p>Recusandae, error, aperiam totam laborum magnam distinctio architecto numquam quae nostrum fuga reprehenderit tenetur minima excepturi itaque vel pariatur rem suscipit ex. Repellendus ipsa placeat deleniti rerum praesentium voluptatibus sapiente nihil quidem magni. Quos, sapiente ea deserunt asperiores molestiae?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, repellat, magni, deleniti placeat obcaecati voluptatem alias voluptate laudantium necessitatibus voluptatum dolorem quod earum quo sapiente magnam atque non animi enim natus voluptatibus beatae debitis ipsa. Facilis atque aperiam id nobis perspiciatis debitis dolorum architecto reprehenderit. Cupiditate, illo asperiores animi enim ad velit culpa dolorem nesciunt similique tempora perspiciatis facilis doloremque saepe id consequatur!</p>
<p>Numquam, quam, aut beatae impedit id dolore doloribus sequi voluptatibus ad quae aspernatur similique vero vel qui ipsum fugit magnam non enim itaque hic. Reiciendis, possimus, magni, ex ea aliquid at optio molestias placeat ab blanditiis ipsum obcaecati cum excepturi quidem neque tempora eum odio voluptatem ipsam officiis quisquam harum quibusdam numquam pariatur sapiente et inventore sit in voluptatibus veritatis doloremque id aut aliquam. Incidunt, atque, minima labore iste cumque ad pariatur qui possimus ut libero inventore corporis perspiciatis nam voluptatem temporibus fugiat impedit culpa dolorem quo provident placeat amet delectus reiciendis rerum repudiandae quisquam similique quis aspernatur in voluptas optio at nulla aliquam numquam beatae dolores ab sint architecto molestiae sapiente commodi quam officiis quas veniam repellendus suscipit! Sequi, voluptate sapiente assumenda commodi. Maxime, nobis, corporis, doloremque, fugit modi sint iste aliquam maiores sequi voluptatum libero doloribus illum placeat nisi tempora natus aliquid. Harum, eius consequuntur asperiores.</p>
<p>Recusandae, error, aperiam totam laborum magnam distinctio architecto numquam quae nostrum fuga reprehenderit tenetur minima excepturi itaque vel pariatur rem suscipit ex. Repellendus ipsa placeat deleniti rerum praesentium voluptatibus sapiente nihil quidem magni. Quos, sapiente ea deserunt asperiores molestiae?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, repellat, magni, deleniti placeat obcaecati voluptatem alias voluptate laudantium necessitatibus voluptatum dolorem quod earum quo sapiente magnam atque non animi enim natus voluptatibus beatae debitis ipsa. Facilis atque aperiam id nobis perspiciatis debitis dolorum architecto reprehenderit. Cupiditate, illo asperiores animi enim ad velit culpa dolorem nesciunt similique tempora perspiciatis facilis doloremque saepe id consequatur!</p>
<p>Recusandae, error, aperiam totam laborum magnam distinctio architecto numquam quae nostrum fuga reprehenderit tenetur minima excepturi itaque vel pariatur rem suscipit ex. Repellendus ipsa placeat deleniti rerum praesentium voluptatibus sapiente nihil quidem magni. Quos, sapiente ea deserunt asperiores molestiae?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, repellat, magni, deleniti placeat obcaecati voluptatem alias voluptate laudantium necessitatibus voluptatum dolorem quod earum quo sapiente magnam atque non animi enim natus voluptatibus beatae debitis ipsa. Facilis atque aperiam id nobis perspiciatis debitis dolorum architecto reprehenderit. Cupiditate, illo asperiores animi enim ad velit culpa dolorem nesciunt similique tempora perspiciatis facilis doloremque saepe id consequatur!</p>
<p>Recusandae, error, aperiam totam laborum magnam distinctio architecto numquam quae nostrum fuga reprehenderit tenetur minima excepturi itaque vel pariatur rem suscipit ex. Repellendus ipsa placeat deleniti rerum praesentium voluptatibus sapiente nihil quidem magni. Quos, sapiente ea deserunt asperiores molestiae?</p>
<p>Regards,<br>
Pierce</p>
</div>
<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>
</div>
</div>
.print_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_content{
float: left;
font-size: 0.9em;
margin: 1em 0 0 0;
}
.print_footer{
float: left;
width: 100%;
margin: 1em 0 0 0;
font-size: 0.9em;
border-top: 1px solid #000;
}
.print_footer_left{
float: left;
}
.print_footer_right{
float: right;
text-align: right;
}
#page {
size: A4;
margin: 0;
}
#media print{
.print_options{display: none;}
.print_wrapper{width: 90%;}
.print_page{border: none; box-shadow: none;}
}
In a table structure adding these display definitions below to thead and tfoot you can print header and footer on each page
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
However, i'm not sure this work fine with div elements.
Try add these displays in your .print_header and .print_footer!