<!--Top Navbar / Search-->
<div class="grid grid-rows-1 grid-cols-3 h-20">
<div class="col-span-1 h-full w-64 bg-purple-200">
Logo Area
</div>
<div class="col-span-1 h-full w-full bg-purple-100">
Search Area
</div>
<div class="col-span-1 h-full w-full bg-purple-100">
Profile Area
</div>
</div>
<!-- Sidebar / Content-->
<div class="grid grid-rows-1 inline-grid grid-cols-2 h-screen">
<div class="col-span-1 h-full w-64 bg-purple-200">
Sidebar Area
</div>
<div class="col-span-1 h-full w-full bg-purple-100">
Content Area
</div>
</div>
The above is the code I am using, I can get this working easily in vanilla CSS.
I am using the above to begin building the Grid structure of a admin-esk design.
However, I am unable to get this working correctly, visable on the print-screen:
The width of the columns, specifically the content column isn't filling the width.
The height seems to break, and add overflow to the page, adding the scrollable extra.
I can't seem to get the search area to fit next to the Logo area.
This is so much easier in vanilla CSS, Tailwind has made this harder.
It's gets much easier when you play around with Tailwind. See a working demo on tailwind play.
Keep me posted in the comments below if your expectations were different than the code I wrote.
<div class="flex min-h-screen max-h-screen">
<!-- Left Navigation -->
<div class="flex flex-col w-64">
<!-- Logo -->
<div class="h-20 flex justify-center items-center bg-purple-300">Logo Area</div>
<!-- Sidebar -->
<div class="flex flex-1 bg-red-200 overflow-y-auto">
Sidebar Area
<br />
<br />
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla at aperiam sunt, quae voluptates blanditiis sed natus nostrum facilis in, rerum ipsa molestiae maxime veniam, accusantium quo facere totam deserunt! Fugit, molestias? Veritatis aspernatur consectetur ipsum fugit molestias reiciendis voluptatem, atque quisquam molestiae error sunt voluptatibus eum, quae blanditiis doloribus? Adipisci, impedit? Eaque earum est officiis excepturi non necessitatibus perferendis. Dolor iusto perferendis incidunt nesciunt sit officiis, dolorum possimus et tempora itaque laudantium ipsa non porro ratione omnis ducimus, voluptatem quos. Voluptatum consectetur officiis magni veritatis, possimus nesciunt quidem cumque! Cumque quisquam maxime libero suscipit veritatis qui a culpa voluptate quos modi repellendus sed est commodi ea, nihil rem laboriosam unde. Voluptatibus corrupti est quia quaerat officiis, eos deleniti deserunt. Optio aperiam velit molestiae, quasi repellendus voluptate sequi? Omnis, repudiandae suscipit perferendis ullam dignissimos labore aut! Veniam fugit earum dignissimos quos quasi, nam obcaecati laboriosam ut placeat recusandae ullam. Hic.
</div>
</div>
<!-- Right Component -->
<div class="flex flex-1 flex-col">
<!-- Header -->
<div class="h-20 flex">
<div class="flex flex-1 justify-center items-center bg-indigo-200">Search Area</div>
<div class="flex flex-1 justify-center items-center bg-blue-200">Profile Area</div>
</div>
<!-- Content -->
<div class="flex flex-1 overflow-y-auto bg-green-200">
Content Area
<br />
<br />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita repellat odit quas, ipsum sapiente recusandae, exercitationem illo dolorem nulla aut, porro ea. Optio, omnis eum? Beatae dolorem odit quae fugiat. Quod nobis tempore mollitia minima repellendus atque quisquam? Quae maiores neque deserunt ad enim impedit rerum, dolorum dolor nulla porro ea ducimus officia repellat assumenda dicta in reprehenderit amet hic? Officiis incidunt quis ipsum nesciunt eum eos aspernatur modi, temporibus ut nisi! Optio quaerat odit, suscipit, quisquam et laboriosam adipisci labore quidem reprehenderit eum earum temporibus odio, omnis mollitia cum. Facilis libero officiis deleniti aperiam veniam aliquam saepe consequuntur quae facere provident illum asperiores, delectus ad animi, possimus fugit aspernatur error perferendis! Quia rem laudantium nemo vero magnam, in iusto. Adipisci tempore pariatur accusantium autem soluta, repellendus eum sequi quae a. Soluta rerum vitae perspiciatis consequuntur quas? Accusantium saepe, alias aliquid voluptatibus repellendus harum expedita vel libero praesentium adipisci dignissimos? Iusto harum inventore soluta magnam esse amet? Obcaecati aliquam reprehenderit saepe ullam, doloribus natus nobis! Quaerat similique, quo voluptatibus deserunt recusandae ratione earum sequi dicta quas iste incidunt totam nam. Doloremque perspiciatis quam distinctio, vitae voluptatibus quos odit aliquam necessitatibus ipsa hic ea error in. Totam in aliquam quo voluptatem non magni earum doloribus nostrum unde! Nisi expedita temporibus ratione. Incidunt eum sint illum ullam asperiores beatae nihil eos? Dolore voluptate molestias dignissimos fuga dicta. Doloribus accusamus distinctio quia deleniti enim officia, culpa quidem, fugiat animi fuga ad iure perferendis! Ab provident sequi deserunt id eos maxime odit totam fugiat ratione. Magnam sint excepturi dicta nesciunt culpa ratione delectus voluptatem repudiandae. Veritatis minima ratione aliquid ipsum quibusdam hic dolorum nihil. Ipsum, repellendus sed mollitia deleniti voluptatum natus tenetur officiis ea non quas expedita, aperiam ducimus sequi eius voluptatibus laboriosam magnam nulla. Corrupti voluptate porro sapiente pariatur velit cum eaque beatae. Eos provident inventore nostrum libero dolores veniam dicta sunt ratione aspernatur expedita, minus iusto est atque ex. Fugit consectetur explicabo, maiores maxime possimus, perspiciatis sequi quaerat beatae obcaecati porro quibusdam? Reiciendis harum repellat nisi esse atque sit, aperiam, quas ipsa error quisquam adipisci excepturi quod earum ducimus. Illo unde similique modi qui! Fugiat ipsam magni quas praesentium non, repellat eaque? Doloribus officiis consectetur iste dolor hic distinctio ipsa aperiam nostrum provident recusandae earum minima delectus magnam, at quod, fugiat tenetur soluta quam excepturi eos est obcaecati, numquam inventore repellendus? Incidunt. Omnis, repellendus rem praesentium autem dolorum voluptas! Accusantium odio eum magnam quis, dolor ipsum suscipit mollitia blanditiis laboriosam in dicta dignissimos doloremque minus, facere deleniti harum enim ut nostrum placeat! Omnis laboriosam excepturi necessitatibus nihil eum! Dicta quam unde consequuntur eveniet provident quidem eaque recusandae cumque magnam iste. Dicta quisquam perspiciatis sint sapiente labore. Corrupti ipsa nostrum voluptatem asperiores tenetur? Corporis quasi necessitatibus iste! Laboriosam possimus tenetur dolorum unde maiores, vel et voluptas perspiciatis perferendis, ratione nam dignissimos, nesciunt amet incidunt voluptatem tempora maxime. Doloribus facere vitae commodi nam assumenda. Molestiae dolorem eos officiis nam dicta vero? Minus incidunt vero magni atque inventore eveniet sequi veniam? Deserunt exercitationem dolores quia provident mollitia dolor odio, nam cupiditate atque voluptas itaque rem! Fugiat, corporis totam porro modi eos magni expedita placeat maxime rerum. Blanditiis mollitia nemo, itaque laboriosam autem illo laborum facilis incidunt vel nulla distinctio nam molestias voluptas quaerat numquam soluta. Nam voluptatem expedita doloremque placeat, voluptate, accusantium consectetur voluptas nulla possimus, corporis at delectus tempore odio autem unde quas hic temporibus error quisquam exercitationem consequatur a saepe. Dolore, blanditiis laborum? Voluptate error, repellat neque porro quod fugiat aspernatur voluptas quidem voluptates dolores maiores, deleniti incidunt. Ullam mollitia esse beatae illo consequatur sed iusto provident, incidunt aliquam dolores a, nulla laudantium.
</div>
</div>
</div>
Related
So im currently trying to use React Bootstrap for my website. I'm confused how to make only one div to be scrollable and the others not. Here's my code in App.js
import * as React from 'react'
import Container from 'react-bootstrap/Container'
import Button from 'react-bootstrap/Button'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
function App() {
return (
<Container fluid>
<Row style={{height: "100vh"}}>
<Col sm={4} className="border border-primary">
<div>Avatar</div>
</Col>
<Col className="border border-primary">
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
<div className="position-sticky">
stick please
</div>
</Col>
</Row>
</Container>
);
}
export default App
In the image, the <div>please stick</div> is not seen because it's far below and the <Col>avatar</Col> is scrollable when I wanted to make the text Avatar to stick.
Does anyone know how to make one div scroll independently while the other divs stays and cannot be scrolled? Thanks in advance
Give the scrollable div overflow-y: auto. One child of a container won't scroll until you give the height to its parent. In the following example, I've given height: 100%, because I want to divide the page into 2 parts which will take full height i.e (100vh). You can also give custom height i.e height: 300px;
Just add height on parent cotainer and overflow-y: auto to child element that you want to scroll.
body,
html {
height: 100%;
margin: 0;
}
div.container {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
div.first {
background-color: burlywood;
padding: 1rem;
}
div.second {
background-color: darkcyan;
padding: 1rem;
overflow-y: auto;
}
<div class="container">
<div class="first">
first
</div>
<div class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut totam nulla quae accusantium sunt provident saepe, quis fugit delectus? Possimus sed id dolore omnis facere harum vitae dolor reprehenderit. Tenetur. Ipsa quasi rem deleniti quidem ut corporis
s officia minima est labore dignissimos quia exercitationem unde! Libero deleniti in laudantium harum nihil reiciendis autem dolorum vero, non blanditiis sapiente quibusdam tenetur animi, dicta laboriosam quisquam sint repellat natus eius nostrum
reprehenderit. Veniam recusandae quod quaerat quis. Cumque eum ducimus, at deserunt nemo minus neque similique dolores rerum voluptas, necessitatibus quis aperiam consequuntur, error quo accusamus. Cum doloremque ut deserunt. Cupiditate, possimus
delectus. Dignissimos minima perspiciatis fugiat. Minima quaerat laborum veniam reprehenderit, ea reiciendis expedita explicabo nemo, recusandae harum, dolores vitae tenetur dolore itaque ducimus odit deserunt pariatur dolor facere molestiae unde
quos et. Ut, consectetur neque! Debitis dicta doloremque eaque ex aspernatur odit saepe omnis dignissimos veritatis ut. Earum dolores mollitia dolorem eligendi ad molestiae, saepe exercitationem harum magni doloribus, natus minima ratione aliquam
laudantium expedita! Nam odit harum consequuntur eaque quas, magni atque tenetur veniam dolor ipsum fuga sapiente vero molestias at consectetur ratione! Ex obcaecati nihil sed eum dicta impedit asperiores dolorum reiciendis vitae! Velit, qui esse
quos eveniet voluptas quia ipsum minus asperiores. Quas, deserunt hic nihil quam eligendi, voluptatem dolores ducimus nesciunt enim saepe officia eos quia blanditiis esse neque omnis aliquam! Ab quod harum maxime illum quam commodi cupiditate eaque,
esse vero nostrum, deleniti ut eum recusandae. Quos asperiores distinctio a debitis? Expedita illum minus modi facere reprehenderit animi, voluptate ipsum? Quis vel, voluptatem veniam, accusamus pariatur delectus aliquam voluptatum quisquam voluptatibus
odio earum itaque praesentium! Voluptate voluptatem expedita reiciendis pariatur aspernatur accusamus ut nihil! Cum id veniam repellendus. Sed, corrupti. Quam laborum corporis, ipsum iste ex, quas est nihil ipsa architecto tenetur, exercitationem
qui commodi repellat. Laboriosam sit nesciunt, quidem ipsum, similique vero optio vel aperiam nemo deleniti quas voluptas? Inventore nesciunt facere consequatur tempora ad ullam sint, commodi voluptate rem temporibus repellat aut dolores accusamus,
tenetur deleniti non quam necessitatibus praesentium fugiat harum iusto eveniet? Hic suscipit corrupti libero. Ipsa dignissimos optio et eveniet nulla itaque assumenda, voluptate a nostrum quisquam consectetur eum eaque magnam nobis provident, distinctio
omnis unde eius ipsam at labore enim iusto accusantium. Beatae, ut. Odio fugit atque, ad nobis incidunt tempora vitae ullam sapiente perferendis non quas aut eos animi minus optio aspernatur voluptates debitis! Nisi, sed a exercitationem ea iure ipsa
iste accusantium. Porro, distinctio voluptatem sequi qui dolore quidem quia odio optio ullam soluta adipisci perferendis, illum reiciendis temporibus quis atque quibusdam possimus laboriosam quae id consequuntur tempore! Ipsum excepturi sapiente iure!
Modi atque provident aut accusamus est, blanditiis architecto, nulla quis quibusdam, hic nobis eligendi explicabo dolorum voluptatem beatae voluptatum sunt repellendus quam! Suscipit eum cupiditate tempore illum sed modi expedita! Eos quas dolorum
id, consectetur recusandae aliquam error nisi labore autem ullam inventore deserunt consequuntur nihil dolore tenetur sit soluta tempore quod quis doloribus sequi! Accusamus repudiandae est possimus facilis! Ab error a, culpa eaque inventore sit amet
dolorum rem, quae omnis aperiam aut nesciunt voluptas ullam dolore reprehenderit ratione et enim magnam eveniet sint iste ipsam deserunt excepturi. Ratione. Harum corporis sunt autem aperiam provident pariatur dolore eveniet consequatur repellendus
voluptate ipsa impedit, numquam illo doloremque velit excepturi quo saepe. Obcaecati, dolore neque quas eum nisi at ducimus recusandae! Debitis rerum a sapiente numquam aut doloremque cum nemo eaque, incidunt at recusandae repellat odit aspernatur
nesciunt obcaecati non velit cumque blanditiis omnis facere vero quis eos ab? Magnam, earum. Iusto voluptates repellendus facere possimus porro ducimus dicta illo, repellat ab. Iste, at obcaecati quis, fuga accusantium molestias consectetur, nobis
praesentium recusandae deleniti ut veniam. Optio debitis labore odit doloremque. Adipisci ullam repellat provident culpa ab molestias autem voluptates tempore aspernatur delectus obcaecati, corrupti nesciunt aperiam? Perspiciatis, est doloribus quam
non hic minus at laudantium unde enim voluptates sapiente officia. Aut, fugit libero, voluptatem eum ipsum consectetur vitae dolores optio modi soluta reiciendis! Sunt eum explicabo reprehenderit iure ut ab. Corrupti eligendi fugit rem sunt libero
aperiam veritatis accusamus nesciunt! Doloremque praesentium eaque nulla itaque autem eum modi maiores, nobis aperiam odio ipsam dolorem optio est nesciunt dolores, sequi beatae corrupti voluptate fuga voluptatem nemo, error ullam debitis? Incidunt,
adipisci. Vitae enim, accusantium autem aspernatur voluptatum ullam aliquam eum reprehenderit repellat hic voluptatem porro quos sunt cumque quisquam incidunt sint blanditiis sapiente odio! Eius nostrum cumque, impedit omnis saepe rem. At excepturi
enim nihil quia laudantium architecto, velit blanditiis mollitia saepe repellat iste natus ipsam! Dolor repellat illo atque ut ducimus impedit similique porro. Delectus sed nihil voluptas ducimus perspiciatis. Ex cupiditate ipsum minima veritatis
recusandae? Soluta porro magnam itaque beatae quis! Facere nesciunt dicta minus blanditiis tempora cum, nisi, a asperiores quis recusandae dolor illum non sint vero hic?</div>
</div>
I'm trying to create a web page for large screens only. So I don't want to have responsive features and also I don't want to have scrollbars for the main container. I decided to try the implementation with tailwind. The design should basicly look like:
----------------------------------
| |
----------------------------------
| | | | |
----------------------------------
| | |
| | |
| | |
| | |
| | |
----------------------------------
The are left bottom area has content that is higher than the area itself. So here I need the only overflow scroll on y axis.
This is my current HTML / CSS with tailwind and it has more scrollbars that I want and the left bottom area hasn't a scrollbar. How can I fix that?
To achieve this, you'll need to play around with flex a lot.
Here's a link to a working demo.
<div class="flex flex-col min-h-screen max-h-screen">
<!-- Header -->
<div class="flex h-20 justify-center items-center bg-gray-100">Header</div>
<div class="flex flex-1 bg-gray-200 overflow-y-auto">
<div class="grid grid-cols-12 bg-gray-200">
<!-- Left -->
<div class="col-span-4 flex flex-1 overflow-y-auto">
<div class="flex flex-1 flex-col overflow-y-auto">
<!-- Tabs -->
<div class="flex h-12 space-x-2 overflow-x-auto justify-between items-center px-4">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
<!-- Images -->
<div class="flex flex-1 flex-wrap justify-center bg-gray-300 p-3 overflow-y-auto">
<div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
<div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
<div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
<div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
<div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
</div>
</div>
</div>
<!-- Right -->
<div class="col-span-8 px-4 overflow-y-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae illum sed, praesentium voluptatem dolor excepturi optio explicabo dolorem facere culpa enim sapiente minima voluptates quis, repellat magni obcaecati ut ullam? Sunt doloribus fuga reprehenderit ipsam adipisci, natus sequi quisquam id nobis quae sit saepe reiciendis molestias amet! Error fugit sequi dolorem laudantium atque. Tenetur ea nam, incidunt magnam sunt praesentium. At deleniti, quos praesentium blanditiis facilis velit deserunt, veritatis fuga beatae perferendis accusamus. Sit, repellat veniam dolore libero officiis voluptatibus quae explicabo ab, dolores perspiciatis cum. Aut ipsa placeat in. Mollitia, dolores enim perspiciatis possimus aut unde cumque, dicta, quae placeat iste exercitationem excepturi nulla eaque illo aliquid quos optio! Recusandae nostrum a rerum similique ex! A quod nobis accusamus. Consectetur provident, quis inventore, quibusdam dolorum sed necessitatibus assumenda iure et delectus facere eligendi? Iusto, cum magnam inventore atque odit expedita iste hic molestiae fugiat accusantium maiores. Perspiciatis, perferendis consequatur! Molestias neque, assumenda facilis sunt debitis voluptate magni nulla est hic iure accusamus corporis aliquam autem delectus, amet quam enim dolore. Molestiae, quibusdam totam minus ullam labore fugiat. Atque, sint. Quis ex laboriosam reiciendis eos sequi maxime amet quod enim repellat consequatur officiis, accusantium ad vitae atque ut praesentium non iure harum error! Temporibus suscipit adipisci optio rerum voluptatum repudiandae. Odio, laboriosam libero aliquam velit sequi id nihil. Excepturi molestiae officiis magni optio veritatis modi error atque itaque. Aliquam dolor impedit mollitia maiores in at distinctio molestias natus debitis fugiat. Quia obcaecati harum officia deleniti ipsam at architecto cum mollitia sint. Dicta totam commodi consectetur voluptates pariatur ad, quisquam quidem. Quisquam nihil suscipit eos magni iusto odio nam unde dolore? Provident repudiandae quo vitae ratione ipsum enim animi tenetur rerum cum, molestiae eius quibusdam omnis nesciunt nobis ex qui est delectus blanditiis facere, eum modi possimus nostrum, ea laboriosam? Tempora. Quas a voluptates doloribus quisquam fugiat harum officiis eligendi, dolorum perspiciatis itaque voluptatum corrupti atque qui animi aliquam. Sint asperiores eius delectus odio, laudantium voluptates officiis. Quod, unde. Ipsa, eius. Sequi atque assumenda vero inventore quo. Tempore necessitatibus magnam dolores. Deleniti, iure quae. Temporibus nisi magnam qui tenetur, incidunt, in aspernatur eum quo quod, aliquam doloribus assumenda. Deserunt, in quos. Qui ullam quia aliquam ad, obcaecati cumque illo, et eligendi exercitationem veniam nobis dignissimos, accusantium ipsam? At iste commodi voluptate dolore soluta, voluptatibus labore, eum reiciendis atque, ea esse nesciunt. Voluptates, labore! Vitae voluptate veritatis illo, iste excepturi sit ut asperiores sed fuga cumque ducimus, deleniti voluptatum magnam debitis architecto. Suscipit omnis soluta officia, saepe perferendis itaque repellat accusamus. Eos? Cum doloremque sapiente tenetur maxime quam deserunt autem minima sed nemo corrupti ad, dolorem laboriosam? Molestias quia aliquid quis labore culpa, sapiente vero harum repellat placeat eos cumque nesciunt architecto? Laboriosam tempora culpa sed, alias dolorem neque architecto, iste repudiandae fuga illo provident, soluta cum sapiente nam ipsa ex quisquam! Deleniti quae delectus eveniet odio voluptas unde. Repudiandae, dolore praesentium? Ab in nisi voluptas praesentium eum doloremque ea, molestiae qui dicta? Ullam, at. At in accusantium itaque ab harum, neque eligendi repellat quas, hic nulla maxime magni delectus nesciunt est? Ipsum dicta repudiandae cum accusantium blanditiis illo quidem velit maiores fugiat aliquam soluta odio mollitia, numquam repellendus neque ea labore. Beatae nostrum quibusdam impedit repudiandae ducimus doloremque voluptas necessitatibus quae? Accusamus nam officia tenetur eius consequuntur facilis! Similique, accusamus dolorum, eligendi eveniet ipsam culpa nobis cum adipisci iusto vero, molestias nulla maiores! Corporis, dolores ducimus illum impedit quam dolore harum. Itaque, doloribus beatae maiores accusantium ab quaerat sunt ipsa quis iste autem amet reiciendis earum voluptatem quas, adipisci expedita! Voluptatem temporibus laborum eveniet incidunt excepturi cum quia est esse ad. Placeat provident aut minima rem veniam aliquid corporis rerum eius et? Odit eos praesentium explicabo repellat, facilis corporis id unde possimus officiis, fugit expedita at modi consequatur. Quis, molestiae consectetur. Temporibus perferendis officia consequuntur illo omnis tempore modi nobis quam rerum sed, doloremque provident tenetur veniam laudantium ex quae distinctio quisquam voluptatum? Mollitia tenetur eligendi praesentium porro reiciendis quas esse. Mollitia aspernatur dolor consequatur laudantium odit a explicabo provident corporis reiciendis. Sunt ut iure officiis, ipsa minus deleniti cumque temporibus doloremque assumenda voluptatibus, est nobis incidunt. Veniam corporis vel impedit. Voluptatibus rem velit sit eius perspiciatis omnis cupiditate laudantium ab quo, earum eligendi deleniti explicabo a eum soluta accusamus repellendus ad ipsum praesentium pariatur aliquid facere debitis doloremque quasi! Autem? Laborum recusandae, optio molestiae distinctio a id vitae esse? Officia distinctio dignissimos nihil blanditiis quibusdam facere nulla eum voluptas excepturi nam quia, atque adipisci? Distinctio quisquam suscipit vitae voluptas enim. Eius beatae non possimus dolores quo nostrum illo aliquam minus commodi fugit architecto alias rerum accusantium ratione, magni atque nisi repellendus deleniti! Ratione necessitatibus sequi magnam, doloribus pariatur dolorem harum! Inventore beatae, incidunt voluptatibus doloremque corrupti facilis cum! Hic ipsum dolorum accusamus quia veritatis, quibusdam commodi tenetur, reiciendis mollitia sapiente facilis nam, accusantium quidem. Voluptate architecto at voluptatem eaque id? Obcaecati adipisci quisquam tempore blanditiis, qui error eius ab ea ipsa suscipit dignissimos nisi quos ut quas voluptatem amet. Ut sit aliquid molestias, hic iste dolorum nobis laudantium quasi quo? Laudantium cumque voluptatem reprehenderit consequatur quisquam alias odit animi cupiditate! Quod nostrum inventore necessitatibus, distinctio quibusdam dignissimos qui ipsa accusantium incidunt neque explicabo temporibus cumque sapiente corporis. Amet, modi exercitationem. Modi aperiam laboriosam corrupti consequuntur provident veritatis sunt animi repellendus ratione! Deleniti reprehenderit perferendis ad natus magnam sunt delectus eaque repellat error, enim alias rerum harum eius fugit. Dolores, eos. Doloribus quibusdam et doloremque natus corrupti earum iure! Impedit id aut unde officia tenetur cum asperiores, eos pariatur! Provident ullam qui beatae ab rerum quibusdam, odit ipsam totam cum quasi! Magni error, quos quia, voluptas natus vel totam impedit voluptatum, fugit ex autem aliquid tempore magnam! Minus et voluptatum similique quis asperiores repellat perspiciatis quasi dolore molestiae vero, itaque laudantium. Corporis quibusdam, sit, quos molestias laudantium et reprehenderit possimus vel atque culpa repellendus at deserunt earum quo. Cum ratione saepe ad, aut corrupti nesciunt, et consequuntur alias explicabo, dignissimos veritatis. Dolores, neque? Eveniet odit ut eos ipsam, ullam autem voluptatum, odio accusantium tempore nesciunt obcaecati. Est, necessitatibus placeat nulla aut soluta quaerat in, sint dolorem excepturi voluptas asperiores laborum maxime. Culpa deleniti aliquam pariatur provident earum. Dolorum, quasi natus, ex dolorem obcaecati enim dignissimos nulla laboriosam placeat itaque repudiandae! Nisi pariatur reiciendis consequuntur ipsa dolore nostrum repellendus in! Possimus, reprehenderit. Quos nam ipsam voluptatum qui quo, placeat error fuga nobis laudantium provident aut minima deserunt similique accusamus impedit commodi facere repellendus? Iste, sapiente id! Fugiat temporibus magni minus provident saepe! Ipsa sunt iure nostrum quibusdam illum unde dolore labore voluptate facilis similique veritatis maiores officia quo quisquam, sapiente numquam temporibus neque in. Iusto placeat saepe suscipit cumque necessitatibus officia perferendis. Nemo quos laboriosam tempore doloribus repudiandae quidem molestiae. Nemo minus ipsa reprehenderit sapiente aspernatur repellat similique, officiis eos illo, animi minima delectus doloremque tempore distinctio ullam sunt, facilis fuga temporibus? Voluptate voluptatibus, ullam deleniti ad in, ratione dolor modi unde impedit libero facere quas perspiciatis accusantium ducimus officiis pariatur, doloribus dolorem beatae. Tenetur tempore beatae quia explicabo eos accusamus quisquam? Est recusandae praesentium impedit, asperiores culpa nesciunt iste reprehenderit earum eligendi cum, accusamus animi, placeat similique? Dolorem provident iusto velit voluptatem necessitatibus aliquid sequi vero, natus, commodi, sit minus veniam!</div>
</div>
</div>
</div>
I'm trying to build a template page with a navbar and a footer where I might add later column inside the main div (container-fluid) but I get stuck with two issues.
The footer is a div that I use as a logging space. It stays fixed at the bottom and I fill it with logs every time I do an action on the page. The content might grow bigger than the space available and scrollbar appears. The navbar is a standard navbar.
The problem appears when I try to fill the container with random data or a textarea. The main div (and the body) are bigger than the main view and overflow the footer.
What am I doing wrong?
Here is the jsfiddle: link
Note that the two parts are colored just to see the issues. The lightcyan part should fill the screen above the footer or at least not grow once it hits it (you can test it by growing the textarea).
My first idea was to set html and body to 100% height, ignore navbar (not sure about its height) leave footer with its fixed height (needed this way to allow using it as a logger) and calculate the main div height. It doesn't work. Note that part of the code comes from examples taken from bootstrap's website.
<body>
<header>
<nav></nav>
</header>
<div class="container-fluid">textarea and columns here</div>
<footer>
<div class="content">connecting..</div>
</footer>
</body>
Wrap all the content of the body in a container that is flex, and its flex-direction is column.
All the parents of main container need to have 100% height.
Use .flex-grow-1 on the main container so that it takes all the available space.
Hide overflow of the main container
Scroll overflow of the immidiate child of the main container. It must be the parent of all of the main content.
body,
html {
height: 100%;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column h-100">
<header class="container-fluid">
<div class="row">
<div class="col-12 p-5 bg-primary">
</div>
</div>
</header>
<main class="container-fluid flex-grow-1 overflow-hidden">
<div class="row h-100 overflow-auto">
<div class="col bg-danger">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis totam corporis alias qui repellendus optio consectetur nihil suscipit ipsa dolorem in ab, illo, hic placeat iste necessitatibus eum accusamus magni! Perspiciatis, itaque dolore, veritatis
et sequi obcaecati ipsum fuga deserunt laborum assumenda ducimus facilis pariatur explicabo? Ex veritatis placeat minus enim iure ea deserunt ut optio. Est odio a omnis! Veritatis laborum sit, ea laboriosam nihil laudantium numquam ab modi ipsam
doloribus obcaecati consectetur nam magnam non sequi illum vero facilis voluptatibus quibusdam unde sunt sapiente! Pariatur adipisci nostrum deserunt! Dolorem assumenda inventore nisi eligendi officia rerum nostrum ea voluptates esse atque deserunt
culpa ex nobis quod est, fugit molestias recusandae sint iusto ut rem cum itaque dolor magnam. Eligendi! Hic porro incidunt iure culpa necessitatibus repellendus inventore laboriosam expedita neque consectetur. Reprehenderit assumenda minima eum
laboriosam impedit, omnis esse molestias vero ut? Totam corrupti dolore excepturi fugit dolorum aliquid. Provident blanditiis quasi expedita excepturi ipsa dicta odit, aspernatur ad quisquam illo? Dolores perspiciatis magnam nulla odio rerum tenetur
inventore fuga. Quo sed eius sapiente, et eligendi blanditiis repellendus saepe! Commodi ipsa explicabo tempore. Dolor voluptas consequuntur amet vero harum nesciunt veritatis placeat? Dolorem ducimus a temporibus perspiciatis cum ipsum tempora
recusandae unde, repudiandae, nostrum esse magnam velit, consequatur debitis! Quos, ad quaerat optio cumque dolorum facere excepturi eligendi quod rerum suscipit adipisci sapiente animi? Consectetur excepturi tempora nemo libero facere pariatur
assumenda quisquam porro. In sint voluptas at maxime. Facilis eveniet voluptatem voluptas, libero saepe autem nulla sequi ducimus id quisquam quos aperiam reiciendis ipsa! Nesciunt quae, delectus laboriosam dicta nostrum dolorem inventore rerum
tempore assumenda animi numquam architecto. Ab ullam amet dolorum impedit debitis id tenetur, nesciunt, exercitationem ut natus a consequuntur harum. Modi illum assumenda earum deserunt voluptatum, non minima hic ad voluptate ullam quae maxime
expedita? Numquam rem blanditiis, ducimus commodi assumenda corrupti odit mollitia iure inventore molestiae velit quod. Itaque architecto dolores optio voluptatum porro saepe maxime, magnam, perspiciatis amet repellendus fuga eum earum voluptas?
Quasi sunt, hic consequatur non dolor dolorem, impedit perferendis autem minus labore ea maiores distinctio laudantium eaque quis optio illum voluptatem repudiandae blanditiis magni, repellat et accusamus amet! Aliquid, amet. Deserunt voluptatem
at excepturi odit maiores quas aut enim consequuntur obcaecati architecto. Fuga nulla maiores vel maxime? Totam a adipisci libero qui, dolore velit rerum optio animi voluptate facilis? Quisquam? Aperiam, quis est pariatur accusantium nulla sed
minima vel quae facilis, fugiat non qui amet velit quas beatae cupiditate eius sit possimus repellat. Mollitia incidunt magnam et enim, aut doloribus. Dignissimos, a non. Praesentium cupiditate corporis quis harum reprehenderit doloremque fugit
natus, laudantium rem, facere explicabo aut neque modi? Omnis id minima alias explicabo recusandae ut. Dolorem repellat exercitationem laudantium! Doloremque ea molestias, ratione iure fuga distinctio beatae sit eveniet similique animi excepturi
non error provident rem amet ullam tempora cum recusandae, eum velit harum? Aut quos hic corporis et. Illum quia dolore, numquam reprehenderit consequuntur officia incidunt ea voluptatum quae, ipsum labore a omnis hic sed necessitatibus impedit.
Aspernatur quo nam expedita tenetur quibusdam rerum iste ab odio illo. Autem facere fuga aliquam asperiores eius saepe, qui aut amet ratione harum alias tenetur quia, earum expedita voluptate dolor, cumque porro ex nobis eveniet distinctio blanditiis?
A voluptate eius delectus? Quasi, illum ut quibusdam vitae molestias atque a, modi adipisci similique distinctio cum at animi, aut pariatur consequuntur ad enim dolore? Sit aliquam dignissimos sunt ducimus nihil itaque non reprehenderit? Iure
error deleniti distinctio esse nam vel nulla aliquid porro consequuntur eius architecto rerum soluta quod ex dolorem at ducimus, quam odio sapiente! Unde dignissimos ratione quas dicta dolorum qui! Error dignissimos eius cupiditate, ipsam labore
illo. Eos repudiandae, beatae assumenda laboriosam minima veniam dolorum consequatur pariatur neque quidem inventore animi rerum nemo ipsa ut aliquid fuga eaque? Blanditiis, aliquid. Modi placeat nemo quos soluta suscipit? Rem necessitatibus dolorem
maiores culpa ducimus accusamus cumque sequi qui unde iste aspernatur labore officiis nisi debitis itaque blanditiis tempora, eveniet consectetur! Nesciunt, quam! Obcaecati, quis odit sint beatae reiciendis suscipit labore et eaque pariatur velit,
ut inventore! Fuga, repudiandae iste, voluptatem corrupti quibusdam error illum quas fugiat asperiores ea omnis ratione qui soluta! Dignissimos ab voluptate accusantium autem facilis architecto, illo sapiente mollitia minima praesentium recusandae
enim officia officiis unde tempore neque repudiandae perferendis tenetur suscipit eos commodi quis dolorum! Explicabo, odio beatae? Doloribus dolore asperiores eveniet, facere corporis magni aliquid, ratione ipsa minima consequuntur, quos nam
enim officiis repudiandae voluptatem. Animi assumenda, deserunt placeat labore iusto eos quisquam officiis architecto nobis explicabo. Repudiandae minima facere laboriosam itaque inventore unde non optio praesentium eligendi voluptates culpa et
corrupti aperiam tenetur incidunt reprehenderit dolorem sit quisquam, sed asperiores veritatis nam vel ipsum dicta! Non. Provident saepe ullam minus laboriosam sit nam rerum! In quidem minima reiciendis, non amet vero sed unde deleniti veritatis
mollitia voluptatem. Excepturi maiores error consequatur dolore labore reiciendis libero quisquam? Accusantium earum suscipit atque architecto dolorum itaque aliquid error asperiores neque ad rem perferendis expedita a voluptate, similique id
vero? Quidem iusto expedita ab, consectetur magni similique suscipit aperiam non. Veritatis debitis rem hic, at in deleniti dolorem architecto velit illo repudiandae, eligendi a. Obcaecati ducimus voluptate placeat nulla facere odio, id aut illo
numquam nobis expedita dolor non ab. Perferendis beatae placeat soluta, repellat dignissimos id qui impedit explicabo? Magni, fugit? Vel, reprehenderit eius dolorem quasi consequuntur vero dolorum molestias ipsum illo enim, quod neque est vitae
ratione laboriosam?
</div>
</div>
</main>
<footer class="container-fluid">
<div class="row">
<div class="col bg-info p-5"></div>
</div>
</footer>
</div>
This is similar to the following solution.
Flush footer to the bottom of the page in bootstrap 4
Update
As of now both the header and footer has fluid height. Use height: [x]px; should you need to have a fixed height footer.
i want to display dropdown menu upon clicking a button. But the dropdown menu is displayed not close to the button clicked and remains fixed when scrolling page vertically. Below is the code
<div>
<div onClick={this.handle_click}>
{toggle}
</div>
{this.movie_list.opened &&
<div className="dropdown_contents">
{React.Children.map(
contents,
(child, index) => { return (
child && <div
key={index}
className="dropdown_item"
onClick={this.handle_item_click}>{child}
</div>); }
)}
</div>
}
</div>);
css is as below
.dropdown_wrapper {
position: relative;
}
.dropdown_contents {
position: absolute;
background-color: $white;
/*position: absolute;*/
box-shadow: 0 8px 14px 0 rgba(6,28,63,0.3);
z-index: 10;
}
.dropdown_item {
min-width: 150px;
min-height: 40px;
display: flex;
padding: 8px;
align-items: center;
cursor: pointer;
}
when i add the class dropdown-wrapper to the topmost div element like below in the above code
<div className="dropdown_wrapper">
<div onClick={this.handle_click}>
{toggle}
</div>
The dropdown menu is not visible properly. I see that its hidden between some other element. Could some pls help with this. thanks.
You set the position on your wrapper to relative and set the z-index for your absolute positioned dropdown element.
.dropdown_wrapper {
position: relative;
}
.dropdown_contents {
background-color: orange;
width: 100px;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
}
<div class="dropdown_wrapper">
<button>
Button
</button>
<div class="dropdown_contents">
<div>Item</div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi consequatur perspiciatis suscipit labore accusamus debitis adipisci praesentium accusantium dolor, possimus, itaque? Accusantium voluptate autem aperiam, recusandae facere ea eligendi temporibus qui deserunt nam commodi rerum aspernatur hic repellendus numquam odio deleniti. Modi beatae voluptate similique illo necessitatibus in, vero eaque. Aspernatur quis vero architecto natus laudantium non ullam necessitatibus, dolores commodi doloremque beatae? Atque reiciendis, minima deserunt ipsa temporibus perferendis facilis magnam ratione, nemo nobis. Placeat veritatis sunt officiis at officia dolore porro, obcaecati vero! Aspernatur magni sapiente quisquam maiores ducimus cumque sunt eos modi amet reiciendis, et, laudantium nihil.</p>
<p>Quis incidunt numquam, illum aut perspiciatis quae eum pariatur reprehenderit laborum a consequuntur aspernatur, atque ratione rem nisi unde quidem harum ab dignissimos consectetur cupiditate earum maxime temporibus. Illum rem, fugit, quidem tempore excepturi necessitatibus minima enim id similique esse, inventore, quod! Consequatur est ea, in deserunt? Fugiat assumenda omnis illo eveniet suscipit commodi nostrum quos cum odit earum. A, natus iusto repellat sint aspernatur nobis nostrum, qui fuga fugiat eligendi molestiae eius rem reiciendis architecto id temporibus ratione. Quasi officia quia, dolorum voluptate, quam libero voluptates vitae error nostrum officiis in. Impedit eos hic fuga incidunt cum vitae ex.</p>
<p>Magnam ut, quidem fugit dignissimos! Debitis praesentium, sed laborum ea repellendus itaque quisquam nesciunt possimus veritatis reprehenderit unde quidem, dolorum iste! Neque quos voluptate odio iusto quis, corporis cupiditate qui provident similique, rerum ratione, minima aspernatur. Cupiditate est laudantium, accusamus cum quas, ab rerum, consequatur nihil et itaque excepturi debitis quod quidem ducimus eaque minima libero doloribus reprehenderit inventore. Fugiat nulla, cupiditate eum quam, non vero magnam accusantium, numquam, rem laborum rerum quaerat. Nulla fugit repellendus iusto neque expedita esse ullam pariatur, quae fugiat modi asperiores unde alias voluptates quas ad quos dicta, soluta voluptatibus. Itaque totam quisquam modi temporibus.</p>
<p>Atque amet ducimus quibusdam voluptas, recusandae natus, doloremque reiciendis. Est sit non possimus libero at animi illo beatae nihil excepturi quos omnis, atque repellendus esse harum similique debitis delectus voluptate! Fugit saepe incidunt eos voluptatibus, dignissimos excepturi obcaecati velit expedita odit ipsum placeat molestias unde esse cupiditate laborum ratione nihil veniam totam rem magnam recusandae itaque, doloribus aut commodi. Amet, illum quae necessitatibus sint similique, velit officiis tempora neque corporis rem, ipsam ad maxime distinctio ea. Eius, inventore? Amet corporis fuga sed, perferendis quam ut dignissimos a molestiae. Cupiditate, saepe, totam. Ratione laborum a eaque. Recusandae, illum incidunt eum eveniet?</p>
<p>Porro autem veniam doloribus aliquam, repellat excepturi libero maiores soluta cumque impedit eligendi cupiditate quo, recusandae nesciunt ex optio, voluptas quia sit. Nobis nisi soluta, ab odit quae. Quia, minus placeat numquam, quisquam adipisci vel quaerat omnis quae! Ut odit, rerum. Fugiat totam dolores itaque sint repellat quo, aliquid obcaecati quasi ducimus architecto minima commodi eum quod qui laboriosam maiores voluptatibus. Debitis nulla autem soluta doloribus ipsa hic, harum mollitia incidunt sapiente, pariatur velit veniam maiores, repudiandae, consequatur quae accusantium at cupiditate illum dignissimos reprehenderit. Facere tenetur, voluptates dicta nesciunt, aliquam, neque cum est mollitia veritatis sequi magnam et cumque.</p>
<p>Explicabo possimus laboriosam quas facilis vero impedit modi enim iusto tempora magnam, at, ratione, amet qui consectetur. Alias est accusantium molestiae consectetur non enim ipsam harum, a, magnam sequi praesentium doloremque at iure iusto unde obcaecati veniam laudantium quidem quos molestias, doloribus quae id quod aliquid commodi. Unde sequi dicta doloremque dolorum repellat ipsam. Sit eos iusto reiciendis tempore hic magni corporis molestias, delectus consequuntur non obcaecati neque voluptatum assumenda, aut rerum iure autem tempora reprehenderit cumque tenetur quibusdam nihil facilis, nemo eveniet nesciunt. Totam, ea, explicabo. Iure veniam neque, consequuntur rem, libero obcaecati eius dignissimos exercitationem. Consequuntur, libero, temporibus.</p>
<p>Ad magnam corporis iure culpa dolorem vero quia, neque, ipsa quas. Qui odio perspiciatis debitis aperiam asperiores, nobis, velit ipsum tempora fuga possimus tenetur eos reprehenderit non ratione. Nesciunt inventore, suscipit architecto eligendi, nemo omnis minus. Quisquam et minima animi accusamus eligendi. Ullam pariatur, quia quidem molestias dolores, expedita. Vero magni tempore aliquid iure tenetur mollitia hic unde obcaecati enim at amet adipisci cum fugiat quam fuga eveniet saepe illum, reiciendis! Atque suscipit molestiae ex assumenda, consequuntur voluptates aliquid voluptatum excepturi optio velit facere reiciendis voluptate natus soluta asperiores praesentium necessitatibus id omnis. Explicabo laborum earum, dolore tenetur, ipsam numquam.</p>
<p>Dolorem eos, quaerat officiis nobis. Officiis rem eligendi temporibus dolore expedita, similique reiciendis ab magnam, inventore eaque fugiat nobis voluptatem voluptatum dolorum obcaecati excepturi molestias iusto unde aperiam a velit. Quasi minima perspiciatis dolor inventore, quisquam laudantium porro veniam possimus, dignissimos suscipit, ipsum aliquam iste nulla aut incidunt praesentium tenetur doloribus laborum ab animi. Neque hic, tempore enim eius accusantium fugiat architecto, assumenda laborum sit aut cumque natus, magni voluptatem iusto eligendi est modi unde aliquam quaerat. Perspiciatis quidem, cumque ex libero accusamus, magnam consequuntur quis similique facilis! Fuga dignissimos fugit suscipit harum hic blanditiis amet magnam nam cumque nostrum.</p>
Please view code snippet in "full page" mode so that the problem is clear. You will see it when scrolling all the way to the bottom and hovering on the items. The footer is pushed down when hovering, which is what I want to stop from happening. Also if scrolling even further down while hovering, the footer will stay up and then the main content will be pushed up.
Basically, the problem is with the height of the nav-items pushing the rest of the content up or down. So a solution would be to get the nav-items out of the flow of the document somehow so that their height won't cause the problems. I know that would only be possible with absolute positioning or floating which is undesirable, but it's just the direction of thought.
The set height of the nav-items is only needed for the slide up transition effect, so if there was another way to achieve the slide up effect, then the height could be removed and the problem fixed. The thing is that it's the height that changes between states, and not the position.
There's a way that works in chrome but not firefox:
Add a fixed height to the nav, remove overflow:hidden from aside, and add high z-index with position:relative to footer.
Of course, I'm looking for a CSS only fix. No JavaScript ;p
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
main {
padding: 100px;
}
/* ----- aside with nav inside. ----- */
aside {
position: sticky;
bottom: 0;
overflow: hidden;
}
.nav {
display: flex;
align-items: flex-end;
}
/* ----- nav item ----- */
.nav-item {
flex: 1;
padding: 1rem;
border-top: 1px solid #dee2e6;
background: white;
text-align: center;
height: 110px;
transition: all 0.5s;
}
.nav-item:hover {
background: #17a2b8;
border-color: #17a2b8;
color: white;
height: 310px;
}
/* ----- border only between nav items ----- */
.nav-item+.nav-item {
border-left: 1px solid #dee2e6;
}
/* ----- h4 heading ----- */
.nav-item h4 {
font-size: 1rem;
}
.nav-item:hover h4 {
color: white;
}
/* ----- items inside nav-item to show only on hover ----- */
.nav-item .nav-link,
.nav-item img,
.nav-item .details {
display: none;
}
.nav-item:hover .nav-link,
.nav-item:hover img,
.nav-item:hover .details {
display: block;
}
/* ----- change <hr> color on hover ----- */
.nav-item:hover hr {
border-top-color: white;
}
/* ----- footer----- */
footer {
height: 50px;
}
/* ----- incrementally hide nav-items on smaller screens ----- */
#media (max-width: 576px) {
.nav-item:nth-child(n+4) {
display: none;
}
}
#media (max-width: 768px) {
.nav-item:nth-child(n+5) {
display: none;
}
}
#media (max-width: 992px) {
.nav-item:nth-child(n+6) {
display: none;
}
}
#media (max-width: 1200px) {
.nav-item:nth-child(n+7) {
display: none;
}
}
#media (max-width: 1370px) {
.nav-item:nth-child(n+8) {
display: none;
}
}
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
</main>
<aside>
<nav class="nav">
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
</nav>
</aside>
<footer class="container-fluid bg-dark text-white py-3">
<div class="row justify-content-end">
<small class="col-4 text-center">
2018 ALL RIGHTS RESERVED.
</small>
<small class="col-4 text-right">
My Website
</small>
</div>
</footer>
Adding a height to nav equal to the height of nav-item when expanded basically fixes it. The change in height will be contained within nav and therefor the rest of the layout is not affected. This just leaves a big gap between main and aside, but can be easily fixed with a negative bottom margin on main.