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%;
}
Related
I don't know why but the 2 divs of my html page are overlapping each other instead of being displayed side by side. Also, the blue div doesn't takes 100% of the height like it should. NOTE: the blue div only has 1 element for the moment (an Imput)
Here is my CSS code:
.bluediv {
height: 100%;
width: 16.3%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
box-shadow: 0px -10px 50px black;
float: left;
}
.reddiv{
height: 100%;
}
Thanks, CyberFlame
You can use display flex by default direction row like this:
html,
body {
padding: 0;
margin: 0;
}
.sect-div {
width: 100%;
display: flex;
height: 400px;
}
.sect-div .side {
width: 20%;
background-color: #007fff;
}
.sect-div .main {
width: 80%;
background-color: #ff0000;
}
<section class="sect-div">
<div class="side">width = 20%</div>
<div class="main">width = 80 %</div>
</section>
Fixed aside:
html,
body {
padding: 0;
margin: 0;
}
.sect-div {
width: 100%;
height: 100vh;
display: flex;
overflow: hidden;
}
.sect-div .aside {
width: 20%;
padding: 5px;
box-sizing: border-box;
background-color: #007fff;
}
.sect-div .main {
width: 80%;
padding: 20px;
box-sizing: border-box;
background-color: #ff0000;
overflow-y: auto;
}
<section class="sect-div">
<aside class="aside">
<h2>width = 20%</h2>
</aside>
<main class="main">
<h2>width = 80 %</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, nihil nobis. Assumenda ipsam ad suscipit qui dicta vero porro rem sequi? Non dolore magni sed itaque minima esse repellendus vero. Recusandae dignissimos, commodi natus assumenda architecto
aut libero corporis, magni ut quo, soluta voluptate. Similique, perferendis. Nam, recusandae debitis totam nihil reiciendis quod, atque distinctio adipisci quo esse necessitatibus dolorum! Incidunt corporis ex placeat, est doloribus magni repellendus
deleniti nam recusandae eveniet dolorem. Dolores aliquid assumenda perferendis odit esse dignissimos, corrupti mollitia ea doloremque libero molestias. Ab nisi voluptas provident. Voluptatum sit aut sequi ab sunt blanditiis asperiores dicta quos
totam accusamus voluptatem deserunt veritatis possimus suscipit earum corrupti esse ducimus illo, consequuntur omnis rem. Laudantium debitis eveniet facilis recusandae. Minus, exercitationem. Minus distinctio ipsam, vero ab autem consectetur iusto
soluta, eligendi similique consequatur natus, laborum asperiores amet repudiandae expedita temporibus fugit aliquid sint quo quod libero blanditiis adipisci. Ea. Earum minus, doloribus recusandae tempora fugiat, sunt voluptates nesciunt a magnam
placeat impedit harum dicta aspernatur doloremque debitis neque exercitationem cumque voluptate quod possimus? Dicta vel fugit officiis voluptates consequuntur. Nisi praesentium, at, quis beatae voluptate similique doloribus iusto tempore saepe
officiis tempora molestiae necessitatibus reiciendis asperiores repellat unde dicta vel aliquid enim dolorem. Nulla excepturi sapiente debitis aliquid assumenda! Vitae nulla quos laborum provident harum maiores ex dolorem, distinctio corrupti est
amet ipsa rem possimus blanditiis quasi architecto deserunt a debitis velit accusantium voluptate beatae. Commodi cum atque iste? Saepe assumenda vitae repellat optio minus ad nulla illo ducimus ullam et sit atque aliquid dignissimos aliquam eius
quae earum, eum tenetur ratione ex eligendi cumque vel similique. Modi, atque! Sit quam ut et a ducimus qui eveniet voluptas corrupti nam totam libero ipsum cum repellat magnam dolores, incidunt saepe nostrum! Nemo ipsa aspernatur dolorum nulla
possimus voluptas voluptates optio? Adipisci saepe autem vitae totam sunt ab, voluptatibus omnis, voluptas incidunt reprehenderit illo praesentium. Magnam maxime dignissimos totam tempora quo id velit eligendi! Quas tenetur accusantium culpa doloremque
ipsa assumenda? Ab perspiciatis sequi consequuntur ratione voluptates illum architecto incidunt, dolorem perferendis ad vel suscipit magnam aspernatur distinctio provident vero velit error autem aliquid. Dolorum nesciunt saepe repellat sed, commodi
dolorem! Quis minima, impedit autem dolore deserunt alias sunt animi porro quae ratione dignissimos, ipsum fugit quaerat tempore repellat adipisci vel deleniti cupiditate commodi iste dolorem accusamus a! Tempore, quia ut. Repellendus, debitis ipsam
quasi sed fuga consequatur. Quo, expedita? Voluptatibus laborum aut nisi illum impedit culpa doloribus ullam autem, quae soluta quidem! Reprehenderit dolorem impedit quis, pariatur adipisci facere nemo. Soluta numquam placeat saepe, sit veniam cupiditate
praesentium eos iure omnis odio consectetur vel corrupti quis, ipsa provident perspiciatis. Cumque, vitae! Unde alias atque voluptatum debitis deserunt possimus veniam cumque. Vero aut tempore unde eum harum, aliquam beatae praesentium nulla atque
vel ipsam natus? Recusandae ipsa repudiandae harum inventore distinctio, quod neque perspiciatis, ducimus animi doloremque, illo enim rerum aut. Voluptas molestiae possimus itaque, rem dignissimos non mollitia ipsum quo pariatur cum! Atque tempora,
assumenda soluta sed doloribus debitis iusto ratione delectus minus necessitatibus velit corporis officiis maxime porro minima? Harum, voluptatum sapiente nulla laborum at nobis temporibus iste vitae distinctio ipsum saepe beatae amet minima id,
consequatur delectus iure error et ab quis fugiat! Libero maiores maxime beatae! Tempore. Quasi aliquid voluptatibus odio dolores molestias consequatur repudiandae ipsum corporis neque officiis, ad fuga dicta repellat, earum sed dolore et voluptatum
reiciendis saepe, obcaecati voluptates maxime cupiditate quod sint? Nesciunt. Maiores consequuntur obcaecati ratione iure suscipit pariatur laudantium eius natus voluptate sint nostrum impedit odio deserunt placeat, quod ducimus, architecto nesciunt
facilis? Sit dicta tempore tenetur culpa, ullam quis sed? Accusamus sit recusandae quidem aperiam sapiente. Ratione autem odit quo odio officiis optio rem magni magnam illum, tempora dolores similique dignissimos necessitatibus non alias labore,
repellat eos itaque dolorum voluptates! Voluptatibus, quasi exercitationem quae recusandae quidem porro praesentium optio magnam quas sed, corrupti necessitatibus ex ratione alias eius odio possimus cum sapiente, dolore eos officia perferendis accusantium
qui vel. Quo? Perferendis sint labore itaque, asperiores suscipit omnis, dolorum atque laudantium aspernatur odio laboriosam sunt at quisquam sit aut veniam voluptas inventore ipsam expedita blanditiis laborum explicabo nesciunt, architecto modi.
Labore. Repellat dolor officia quos maxime iusto sed! Magni quod quibusdam deleniti animi harum? Enim soluta dolorem magni a ipsam aspernatur cumque molestiae, tempore tenetur culpa veniam eos laudantium animi vel! Debitis cumque non corrupti dolorem,
architecto nesciunt autem, ea perspiciatis aliquid, laborum aspernatur a asperiores maiores voluptatem? Molestiae esse aspernatur repellendus, odio minima, doloremque, maiores dolores amet quas iusto reiciendis. Ea, incidunt! Aliquam incidunt voluptates,
voluptate laudantium vel explicabo necessitatibus fugit laboriosam excepturi veniam enim nesciunt dolore. Odit, quas culpa provident a explicabo, consequatur officiis voluptatibus temporibus placeat, eveniet sapiente. Quia amet et aliquam ipsa,
nulla, repellat, facilis rem tempora harum eligendi quos. Deleniti fugiat molestiae sed deserunt, consequuntur commodi excepturi aliquam quam, nihil culpa quasi soluta quos eum ratione? Illum temporibus quia minus, recusandae, culpa autem sequi
porro officia magni eligendi voluptates facilis consequatur dolore? Officia ratione cum est neque inventore ut accusamus voluptas dolores, distinctio, optio quibusdam magni. Odio quidem expedita quasi, possimus aperiam tempore blanditiis veritatis
soluta ex iste voluptas maiores! Dignissimos laudantium earum minus alias dolorem sed est a ullam molestias? Consequuntur sunt unde ipsam fugit? Sed, praesentium excepturi repellendus harum voluptatum, obcaecati magni ex accusamus est natus aliquid
molestiae. Mollitia, magnam. Vitae fuga optio quia sit ullam fugit cupiditate minus maxime quas? Nemo, quidem asperiores? Repudiandae aut explicabo illo labore, consectetur ab nam minima, incidunt dolorum reprehenderit, eaque soluta quaerat laborum
sed autem! Dolorem voluptate possimus iure, quae accusantium voluptatibus molestiae voluptatem cum optio tempore! Sunt laborum libero, est quaerat ut itaque similique alias explicabo ipsam mollitia fuga ea nisi voluptates non totam aspernatur ipsum
molestiae quo saepe distinctio et sint eveniet accusantium neque! Perferendis. Tenetur placeat impedit tempora incidunt eligendi qui fuga laborum consequuntur amet. Quibusdam voluptate officiis iure! Accusamus voluptatum, quam, hic officia veritatis
praesentium necessitatibus beatae maiores fugiat nemo soluta, et voluptates. Nobis adipisci tenetur a facilis, architecto, omnis, odit illum fuga error laboriosam similique assumenda sapiente. Iure, consequatur. Illum facilis debitis officiis doloribus?
Eaque modi ducimus vitae. Quod sint rerum blanditiis. Cumque dolores voluptatibus veritatis placeat dolor eaque molestias asperiores quia. Eos, illum. Perspiciatis repellat minus nesciunt omnis, praesentium quod ad magni voluptas maxime facilis
aut asperiores blanditiis nulla deserunt saepe? Commodi nostrum eveniet doloremque nobis ratione corporis ex praesentium omnis quas sint voluptatem itaque totam in explicabo unde, harum, vero, enim qui? Maxime deleniti tempore temporibus! Illo odio
libero quidem! Veritatis quos reiciendis odio magnam? Sequi, totam ea laborum at rerum magnam hic, iure voluptatibus porro distinctio ipsam amet cum illum qui consectetur repellendus fugiat, incidunt pariatur optio voluptate possimus. Fugiat temporibus
ad at sequi molestias vitae ipsum adipisci blanditiis quia veniam sit rerum quae, hic earum veritatis quas illum mollitia, esse harum deleniti dignissimos repellendus nihil? Quas, eligendi dolore! Atque, rerum molestias fuga dignissimos fugit voluptatum
dolor in sit soluta numquam natus modi porro obcaecati. Omnis dolorum neque quam, maiores adipisci natus perspiciatis quod dolore asperiores tempore. Molestiae, obcaecati. In praesentium odio perspiciatis aliquid est temporibus corrupti porro, molestiae
voluptatem qui assumenda quod beatae nulla nisi placeat deserunt reiciendis voluptatibus unde fuga enim accusamus numquam tempora. Beatae, eum nobis! Eos fuga inventore, ipsa quibusdam delectus, nihil voluptatum ipsam recusandae laborum soluta numquam
non voluptate vero natus qui ex sit? Magnam a quae voluptatem rem exercitationem veritatis consequuntur provident amet? Illum atque quisquam sapiente recusandae laboriosam laborum praesentium ab magnam veniam provident totam, fugiat nulla reiciendis
est ratione dolor, nostrum laudantium tempora impedit incidunt eaque? Expedita magnam sapiente veniam deleniti? Ipsa qui nemo corporis, quaerat quibusdam animi deleniti, aperiam ad expedita dicta obcaecati dolorum dolore adipisci ipsum eum consectetur
culpa ea praesentium sunt sapiente ipsam explicabo. Harum in ex ea? Nihil reprehenderit repudiandae nesciunt quaerat debitis ipsa rerum, tempora quam neque, beatae harum earum esse? Quod culpa consequatur eum a! Aut, aliquam temporibus deleniti
vel sapiente molestiae. Aperiam, eum dolor. Id accusantium error ipsum a aut consequatur esse quaerat quibusdam molestiae magnam, impedit suscipit doloremque, alias rem asperiores quas nam eligendi qui facilis porro eius! Recusandae sed enim nisi
et? Iure tenetur soluta ut quasi veniam explicabo quod odio commodi ullam, praesentium velit dolorum, repudiandae ex saepe fuga sit laboriosam provident nostrum facilis debitis a reiciendis unde. Libero, dolores vitae. Ducimus repudiandae officia
nihil nam consectetur, voluptatem velit ipsa maiores. Ea aspernatur corrupti soluta dolore quod enim perferendis aperiam ratione iste aut sapiente, ad impedit harum sed nulla in inventore. Error, at dolore. Nesciunt iure vel quis et asperiores placeat
in consectetur, ducimus, accusantium natus repellendus eveniet nemo aspernatur animi fugiat, sunt nisi error expedita provident! Accusantium reprehenderit exercitationem quis. Beatae impedit eaque est error non facere obcaecati rerum rem aperiam
magnam ullam illum, consequuntur cupiditate enim esse animi suscipit, culpa nulla aspernatur distinctio recusandae voluptate! Inventore mollitia reprehenderit praesentium! Minima incidunt hic atque non corporis unde distinctio, repellendus ut numquam
dignissimos possimus iure, deserunt similique est dolor magnam fugiat assumenda laboriosam aliquam. Tempora sint illo, quae iure aliquam nobis. Nemo quos, ipsa dicta quae cumque quidem nostrum laboriosam! Dolores, non officia? Omnis voluptatem sint,
magni eveniet aliquam asperiores illo tempora assumenda fugiat iure, laborum, magnam expedita mollitia molestias quo? Asperiores vero eos voluptatibus quasi atque eum beatae, qui nam sit, rem maiores quidem nostrum explicabo iure sequi natus sed,
laudantium eveniet ad illum? Nam asperiores consequuntur eum quasi eligendi. Sunt aliquam aperiam accusantium praesentium facilis laborum cum voluptate qui magnam. Expedita ducimus maiores harum iure consectetur consequuntur sed, fugit officia.
Est soluta nostrum voluptate voluptates perferendis dolore eos? Tempore! Velit voluptate soluta possimus, voluptatem obcaecati nesciunt numquam laborum a aperiam suscipit necessitatibus veniam. Alias rerum veritatis quibusdam. A culpa est accusantium
odio vero voluptate maxime veniam tempore. Animi, neque! Animi iusto a reprehenderit dolores inventore. Ipsum quo omnis voluptas. Perferendis, officia obcaecati ut consequuntur voluptas debitis dolores amet quasi accusantium possimus explicabo vitae
harum veniam enim consequatur corrupti a? Omnis.
</p>
</main>
</section>
Okay. I think this should help.
We'll call the div containing both the red and blue divs "box", we'll give it a class of box, and the red and blue divs will have a class of their respective colors.
the html will go like this:
<div class="box"> <div class="blue"></div> <div class="red"></div> </div>
then your css:
.box {
display: flex;
width: 600px;
height 400px;
}
.blue{
width :20%;
height: 100%;
background : blue;
}
.red{
width :80%;
height: 100%;
background : red;
}
If you want the blue div to be fixed then you should:
1- divide the width between them evenly considering every single pixel you add like shadow, margin, or padding for them.
2- float the red one to the right.
3- To make sure they always fill viewport height, use vh instead of %
body {
padding: 0;
margin: 0;
}
.left {
color: white;
height: 100vh;
width: 16.3%;
background: blue;
position: fixed;
top: 0;
left: 0;
}
.right {
color: white;
height: 200vh;
width: 83.7%;
background: red;
float: right;
}
<section class="container">
<div class="left">width = 16.3%</div>
<div class="right">width = 83.7%</div>
</section>
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>
Have tried alot, all versions of position. It WILL stay at the bottom on one page. but not on some. so very weird.
.footer {
width: 100%;
height: auto;
background-color: #17aa1f;
text-align: center;
position: relative;
bottom: 0;
}
.footer-info li {
color: white;
list-style-type: none;
}
<footer>
<div class="footer">
<ul class="footer-info">
<li>ex</li>
<li>Contact on:</li>
<li>ex#gmail.com</li>
</ul>
</div>
</footer>
Using position: relative; on your .footer won't do anything as that container would just make it relative to the parent which is your container <footer>. Use position: absolute; instead as that would make the class be anchored to the DOM instead. See the snippet below for your reference:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height: 100vh;
}
.footer {
width: 100%;
height: auto;
background-color: #17aa1f;
text-align: center;
position: absolute;
bottom: 0;
}
.footer-info li {
color: white;
list-style-type: none;
}
<body>
<footer>
<div class="footer">
<ul class="footer-info">
<li>ex</li>
<li>Contact on:</li>
<li>ex#gmail.com</li>
</ul>
</div>
</footer>
</body>
More on position property here.
I think You Don't need to use position whan you add footer tag
Don't Add any tag or any text below footer tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height: 100vh;
}
.footer {
width: 100%;
height: auto;
background-color: #17aa1f;
text-align: center;
bottom: 0;
}
.footer-info li {
color: white;
list-style-type: none;
}
</style>
</head>
<body>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet, animi quasi
vitae natus labore blanditiis totam eligendi dolorem voluptate nisi
voluptatibus ut hic provident distinctio pariatur perferendis quidem ad
facilis quaerat esse corporis, perspiciatis cum tempora. Nobis quos eos quis
dolorem, odit officia consequuntur reprehenderit accusantium mollitia
aliquam odio ex veritatis temporibus laboriosam placeat blanditiis
voluptatem. Placeat dignissimos beatae quas distinctio officia iure
molestias nostrum non animi id ex itaque, vero consectetur labore obcaecati.
Hic maiores veritatis expedita cum eum ipsa esse quisquam? Culpa pariatur
nostrum debitis tempora consectetur, temporibus voluptas totam possimus
praesentium corporis sapiente modi doloremque ut dignissimos aliquam qui
molestias officia dolorum facere facilis ad enim. Laborum inventore quae
incidunt odit vitae molestias, voluptatibus deleniti sint eos culpa nam,
obcaecati atque illo mollitia. Corporis, laboriosam! Earum sed praesentium
ipsam blanditiis voluptas voluptatum commodi. Error qui quo dolore assumenda
sit maiores omnis dolorem inventore laudantium, aliquam amet at commodi in
quae, porro esse cum molestiae eligendi ratione cupiditate neque
consequuntur earum? Eius rerum praesentium consequatur aliquam numquam in
beatae ad tempore sequi, quibusdam mollitia repudiandae debitis temporibus,
recusandae aut! Quibusdam, culpa atque reiciendis tempora repellat
distinctio quo deserunt? Commodi ab dicta nobis aliquid quas corrupti
dolores magni quam ad fugit perspiciatis, pariatur ipsam laborum molestias.
Accusantium vero perspiciatis tempora facilis assumenda enim consequuntur
perferendis minima, aliquid debitis iure voluptate molestias, sapiente
pariatur sequi quisquam sit neque atque dolor saepe autem ut animi fugiat
numquam. Temporibus tenetur nesciunt ipsam numquam quaerat inventore autem
voluptates velit unde sapiente, dolor nam, doloribus sit eos dolore aliquam
corporis optio explicabo enim alias quis? Error rem facere provident
inventore deleniti repellat possimus repellendus obcaecati, deserunt facilis
quis, similique eum debitis magnam dolor, praesentium cumque atque sapiente
expedita iusto sed! Maxime rerum inventore mollitia cupiditate, quae
consectetur iure ad explicabo architecto dolor voluptatum laborum voluptates
voluptatibus adipisci ipsum veniam recusandae nihil molestias, suscipit,
consequuntur ea porro praesentium? Dolorem, iusto obcaecati. Id fugit est,
magnam, placeat repellendus voluptatem dolorem libero tempore nisi dicta
nulla qui quod esse ab numquam exercitationem porro perspiciatis explicabo
iure? Cupiditate, expedita! Recusandae itaque quae sapiente, amet eius fuga
commodi cupiditate vitae quis! Saepe molestias, quidem odit ex dignissimos
et numquam pariatur soluta. Nisi, nulla? Inventore quis maiores, similique
sunt officia architecto culpa voluptatum nostrum corrupti expedita
reiciendis neque, quae exercitationem necessitatibus quo eius pariatur
mollitia dolores numquam, quos natus eveniet voluptate provident. Beatae
ipsum eaque sit illum, libero, facilis repellat possimus reiciendis quia cum
quo, enim voluptatum. Et voluptatibus maxime atque quia magni nostrum iure.
Aspernatur, voluptatum! Enim iste necessitatibus nostrum minima voluptatum
atque quis nisi at, esse vel voluptates maxime dolore dignissimos, dicta
aliquam quam qui numquam, saepe dolorum ullam. Accusamus voluptatibus at
mollitia necessitatibus, aperiam reprehenderit hic inventore qui tempore.
Doloribus, autem expedita molestiae voluptatum totam necessitatibus debitis
impedit amet eum! Nostrum earum aliquam quidem ratione vel pariatur
quibusdam inventore nam quis, alias impedit, mollitia at sit itaque, quia
totam consequuntur doloremque autem? Possimus sit autem et in aliquid, odio
commodi tempore nobis porro. Exercitationem sit laborum officia ducimus
earum voluptates similique cumque totam, quas alias quibusdam rem est
adipisci magnam quam maxime sapiente asperiores distinctio error ad impedit
architecto. Cupiditate nulla consequatur repellat commodi quae sunt, autem
delectus necessitatibus consectetur fugiat, quasi placeat a debitis mollitia
asperiores alias in corporis, aliquid corrupti reprehenderit nam qui non
voluptatem! Nesciunt a modi ut ab sint, sed corrupti mollitia quibusdam
quos, nisi fuga ipsum sunt ullam in perferendis? Distinctio iusto quod quia?
Deserunt quisquam consectetur aut eius laborum nam eveniet, dolor porro
nihil. Quia tempora asperiores sapiente quidem magni at rem, corporis dolor,
labore iste earum eveniet reiciendis, laudantium consequatur. Fugiat odio id
dolor ad non corporis, earum numquam voluptatibus maiores quae, doloribus
itaque. Placeat possimus provident adipisci fuga eum reprehenderit delectus
sapiente itaque. Neque vitae veniam velit perspiciatis nesciunt enim facilis
soluta fuga nulla dignissimos voluptates quod reiciendis quaerat, porro
sapiente? Repellat saepe fugit quaerat, unde vero molestias! Numquam autem
neque ipsa beatae quisquam commodi. Recusandae nesciunt quia esse voluptates
veniam qui! Quod maiores consequatur veniam natus rerum totam iste,
praesentium beatae exercitationem eos non alias voluptas harum quos quidem
ut, quaerat quis, aspernatur expedita iure molestias distinctio! In adipisci
modi deserunt repellat obcaecati ducimus, ut laborum similique aperiam
assumenda, quia ab aliquam alias itaque doloremque corrupti quasi vero nobis
aut sit reiciendis facilis fugit molestiae explicabo? Optio sit possimus ex
quas hic repellat laborum iste repudiandae minus perferendis provident
reiciendis, delectus sed eveniet vitae. Iste laboriosam, illum quas
provident nostrum ducimus saepe atque vitae! Enim aut voluptatibus
laudantium eum error qui modi, molestiae a. Maxime, molestiae perspiciatis
maiores quia soluta vero. Quidem aliquid culpa possimus, rerum quibusdam in
maxime animi ipsam architecto blanditiis corporis? Laudantium iure earum
voluptatem a, cupiditate porro id assumenda quisquam est consequuntur cum
obcaecati distinctio unde asperiores architecto! Deserunt excepturi nihil
amet voluptate nesciunt, placeat aut, iure architecto veritatis pariatur
blanditiis aspernatur quasi. Laboriosam ipsam labore excepturi aspernatur
sapiente aut totam vel, impedit et laudantium! Necessitatibus, consequatur
tempora dolores quaerat aliquid sint labore sequi dolore saepe a eos
pariatur itaque facilis sed, deleniti hic aperiam optio eius. Est cumque,
alias quaerat tempore perferendis maxime. Est pariatur sed veniam fugit,
architecto possimus a cumque provident maxime voluptatem quaerat adipisci
voluptates accusamus sint omnis alias doloribus explicabo nam. A asperiores
nisi reiciendis ut nostrum quam officiis labore iste repellat, laudantium
autem in fugit perferendis optio necessitatibus quod laboriosam incidunt non
sint. A facere animi error odio cumque obcaecati ad repellendus ut quam
omnis dignissimos assumenda facilis quis sunt sint, aliquam nisi quo
laudantium eaque totam libero repellat repudiandae veritatis velit. Libero
ad dicta aliquid incidunt eum voluptate reprehenderit necessitatibus aperiam
commodi, quae eos iste reiciendis! Excepturi minima a incidunt id, vero esse
alias assumenda dolores dolore magni possimus voluptatibus eaque dicta quam
enim saepe, veniam, explicabo modi architecto ullam similique! Earum minima
laudantium tempore! Quisquam quo esse nulla impedit architecto est
cupiditate alias neque accusamus error repellat, ad blanditiis eos enim,
sint, perspiciatis quam mollitia eius maxime natus. Voluptatum a
voluptatibus ab autem molestias obcaecati veritatis! Lorem, ipsum dolor sit
amet consectetur adipisicing elit. Laudantium suscipit omnis est nemo quod
aliquid totam, accusantium nisi, id sequi ex aspernatur molestias quaerat?
Harum asperiores libero, minus exercitationem ut distinctio repudiandae
sunt, laboriosam veniam soluta quisquam possimus dicta placeat a molestias
repellat porro eius sint earum voluptates voluptate nisi amet voluptatibus?
Quam commodi dicta voluptatibus a voluptates tempore, labore nihil ipsa
voluptatem inventore. Quas repudiandae ipsa deleniti minus error harum
repellat incidunt, iste maiores velit quia quibusdam iusto officiis, quasi
autem tempora magni aut recusandae, adipisci accusantium. Reprehenderit, in
repellendus libero nulla impedit tempora temporibus officiis error earum
laboriosam neque nobis similique soluta hic totam eligendi beatae ipsam
nostrum incidunt veritatis eos! Ipsam blanditiis cum reiciendis porro
voluptatum corrupti itaque totam nostrum explicabo qui ut modi, et iste amet
officiis assumenda a. Voluptatem ab repellendus autem alias reprehenderit
voluptas cupiditate minus earum ratione. Et repellat minus dignissimos
labore pariatur reprehenderit quisquam provident quas, accusamus assumenda
ut omnis cumque fugit obcaecati culpa amet ullam sint ad sit porro voluptas.
Eligendi dolorum enim excepturi vero nam? Ex error sed autem, asperiores
temporibus, repellat sint earum delectus eaque saepe blanditiis. Impedit sed
corporis nam, praesentium, fuga distinctio consectetur fugiat aspernatur
quis id, veritatis nulla ipsam similique quos aliquid suscipit assumenda
dignissimos nihil eos laborum vero ducimus ad dolorum. Assumenda ducimus
magnam facere veniam ut fugit hic! Consectetur quos, dolor alias laboriosam
praesentium hic quis voluptates nihil laborum assumenda quod autem modi
magni rem ea. Voluptatibus in debitis veniam minima. Consequuntur cum eius
possimus non, molestiae, mollitia eos fugit aliquid corrupti quod debitis,
beatae error voluptatibus impedit pariatur iusto? Omnis voluptas laboriosam
repellat iure blanditiis perferendis vel praesentium sint corrupti
necessitatibus eos, dignissimos quo quisquam deserunt, ad nisi nostrum?
Cumque dolores quos corporis sint sit fugit dolore numquam praesentium.
Dolor delectus eaque eos molestias, velit assumenda vel explicabo, in odio,
minima possimus nam iure aperiam totam dolore nisi. Quasi repellendus
perspiciatis deserunt vel et inventore excepturi soluta rem libero
cupiditate! Distinctio id necessitatibus voluptatibus expedita quasi et quae
laborum eos recusandae maiores vel iste libero deserunt quia dolorem magnam
iusto, fugiat rem repellendus. Quas incidunt velit deleniti fuga quaerat
beatae corporis perferendis animi cupiditate asperiores perspiciatis dolorum
saepe quia praesentium accusamus laboriosam, explicabo optio dolor quasi
nulla atque repellendus eaque dolores dignissimos. Accusamus autem possimus
asperiores neque sit debitis? Corrupti accusamus, ea eaque expedita aliquid
minus eum nulla voluptatum modi provident, eos nihil! Magni ipsam asperiores
quis, amet ipsa dolor magnam quisquam perferendis necessitatibus aspernatur
ratione, reiciendis, rerum cumque quo? A maxime, ex iste quo quidem commodi,
eaque minima ipsa dolorum voluptatum rerum dignissimos officiis minus at hic
inventore sunt, voluptatibus reprehenderit! Est ipsa esse tempora atque ut
enim vero culpa rerum officiis dicta, at sed, illum dignissimos labore nisi
error neque, tempore eligendi in adipisci! Ratione error autem voluptas ad
perspiciatis qui voluptates praesentium ducimus accusamus explicabo facere
rerum, exercitationem pariatur velit! Totam, quam! Officia alias magnam
suscipit id sunt sit quasi repellat cupiditate libero assumenda. Aliquid
molestiae quae assumenda nisi recusandae nam! Nulla iste odit dignissimos,
ipsum ab et iusto, quisquam esse accusantium, eum aspernatur magni mollitia
voluptate quo libero consectetur. Voluptates eos doloribus commodi harum
pariatur quibusdam molestiae animi saepe iusto quidem, error tempora
expedita aliquam. Quo beatae doloremque voluptas repellendus illum iure
iusto, quam molestiae perferendis. Consequuntur pariatur cumque aut deserunt
deleniti dolorem quidem! Voluptatum possimus vitae exercitationem facilis,
architecto accusamus, labore quae et dolores tempore, atque nostrum! Non
delectus iste sequi cumque beatae fugiat eaque vel. Dolor perspiciatis,
eveniet dolorem aliquam nemo nisi illo laborum tempora autem iste accusamus
id vitae unde. Laborum consequatur culpa ratione vero odio ab eos doloribus
a debitis quod aliquid labore iure, exercitationem aperiam excepturi?
Tempore expedita iure temporibus? Temporibus, saepe nemo? Iusto reiciendis
et ut vero voluptate mollitia magni quasi ipsum quisquam! Obcaecati fugit
repellendus aut exercitationem ullam dolore consectetur quam quis fuga
dignissimos accusamus, doloribus aperiam perferendis atque eos sint rem
adipisci eius dolorem? Natus architecto magnam tempore blanditiis dolor
iusto numquam nisi nam voluptatum sequi. A dolorem facilis tenetur suscipit,
nesciunt dignissimos autem molestias officiis. Praesentium, quod quidem.
Fugit sapiente voluptate quos! Cum aspernatur voluptates excepturi ipsum,
fuga nobis, quo in reiciendis quibusdam obcaecati reprehenderit
exercitationem doloremque molestias saepe repudiandae placeat! Ullam
blanditiis id dolore laboriosam voluptatum a quasi nesciunt minima expedita
excepturi mollitia, est, quibusdam velit repellendus aliquam dolores, libero
iure. Vitae, aspernatur exercitationem vero rerum quae labore fugit
cupiditate distinctio libero a laboriosam ab tempore reiciendis modi minima
alias inventore minus eius veritatis maiores ipsum nam. Amet esse provident
fugit doloribus quo ducimus molestias minima aliquam consequatur eligendi
architecto earum voluptatibus cumque, voluptas magni, nesciunt quod
temporibus suscipit aut aspernatur, ex praesentium beatae. Natus nam harum
est exercitationem consequatur iste nulla quo nobis atque delectus voluptate
sunt quibusdam fugit, cupiditate voluptatem inventore et soluta perspiciatis
nostrum sit aliquam maiores praesentium. Repellat asperiores provident
dolorem illo, expedita rem quam doloremque porro repudiandae atque
aspernatur nobis quibusdam necessitatibus eos labore quia accusamus adipisci
iure magnam eligendi est voluptates repellendus incidunt perferendis? Sed
nihil voluptatibus beatae molestias fuga vel velit, excepturi itaque ipsa
culpa voluptatum! Autem delectus nemo dolor numquam et esse molestiae, in
similique impedit sunt, possimus, quasi soluta harum illum. Porro dicta
nostrum quisquam ipsa reiciendis autem. Aperiam amet aut delectus enim ab ad
labore eum ullam perspiciatis. Totam repellat suscipit voluptatum in! Aut
sed, adipisci amet pariatur veniam odit exercitationem eos repellendus
accusamus doloremque perspiciatis recusandae officia quam architecto quasi
accusantium delectus dignissimos repudiandae. Deserunt sed expedita eos in
omnis? Omnis quaerat optio quidem incidunt consequuntur, dignissimos aut
minima. Fuga aliquam veniam, unde nostrum reiciendis recusandae. Ipsum
perspiciatis exercitationem ad voluptatum maiores et tempora quisquam
reprehenderit. Officiis fugiat aspernatur, nobis veritatis nam
exercitationem provident rerum explicabo rem maiores distinctio porro sed,
voluptatibus magni doloribus, amet magnam non et iste dolorem voluptates
dicta. Ex, modi. Voluptate odit quam soluta vero velit ea sapiente ratione
deleniti harum asperiores, nobis voluptatibus, culpa nulla, illum
consectetur. Laborum, eaque quibusdam animi, in sapiente distinctio ipsa,
iure exercitationem nisi magni voluptatibus aperiam natus omnis.
<footer>
<div class="footer">
<ul class="footer-info">
<li>ex</li>
<li>Contact on:</li>
<li>ex#gmail.com</li>
</ul>
</div>
</footer>
</body>
</html>
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.