html, body {
height: 100%;
}
main {
display: flex;
height: 100%;
}
ul {
list-style: none;
padding-left: 0;
}
nav {
background-color: #f1f1f1;
flex: 0 0 200px;
position: relative;
}
nav section {
position: absolute;
top: 0;
bottom: 0;
padding: 1rem;
}
article {
padding: 1rem;
overflow-x: auto;
}
<main>
<nav>
<section>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
<li><a href="#">Item 9</a></li>
<li><a href="#">Item 10</a></li>
</ul>
</section>
</nav>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit ipsum aliquid assumenda tempora provident, obcaecati maiores ipsa? Placeat modi iure neque quas ipsa optio! Magni vero laboriosam porro, illum perspiciatis libero harum consectetur nulla voluptatem quae maiores vitae atque, maxime, deleniti est qui quibusdam. Sed delectus, aperiam recusandae quaerat placeat in consequatur beatae enim tempora quia non, similique vero illo eum ratione ea rerum odio, accusamus obcaecati. Blanditiis quaerat consectetur accusantium fugit eligendi, ipsum nobis. Asperiores, unde ab quisquam enim error quam voluptatum eveniet voluptate repellat incidunt. Ullam ipsam, voluptate ea. Quibusdam voluptatem vitae laboriosam cum, molestias, corporis necessitatibus quisquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore accusantium quisquam possimus, porro et vitae tenetur modi sunt reprehenderit quis laboriosam, exercitationem veritatis nostrum? Fugit dolores aspernatur, exercitationem rem repudiandae, cupiditate reprehenderit necessitatibus rerum cum vel quis voluptatibus voluptates culpa praesentium doloremque tenetur! Ratione labore, eveniet nesciunt. Natus obcaecati eligendi deserunt facere! Id ad vitae aperiam quaerat voluptates labore dignissimos eaque quis temporibus vel et autem ipsa repellat nisi a, voluptas aliquid eveniet perspiciatis in mollitia asperiores! Ullam voluptatum, omnis accusamus vel ducimus, deleniti illum, odit unde iusto dolorem laborum sunt cum veniam fugit aspernatur autem quidem illo cumque, asperiores blanditiis necessitatibus quos recusandae voluptatibus perspiciatis. Veniam cupiditate accusantium blanditiis, voluptatem similique tenetur doloremque corrupti aliquid fugit corporis quas impedit ad nostrum officiis molestiae hic laudantium necessitatibus temporibus doloribus voluptatum cum? Cumque doloribus, incidunt repellat, voluptates ab debitis cupiditate totam, commodi illum similique ipsam architecto. Beatae atque dolores quia totam, aut voluptas veritatis rerum ad qui. Reprehenderit neque autem quam voluptate, magni tenetur, iusto? Praesentium, qui! Voluptates repellendus quam vitae laboriosam, optio soluta vero, et, doloremque ex corrupti dolor nulla qui culpa doloribus architecto facilis? Deserunt, maiores, porro. Dolor quam, velit illum odit praesentium, dignissimos, aut ab itaque laborum molestiae ipsa nam dolores voluptatibus impedit. Consequuntur eligendi deserunt iure quisquam, rem cum distinctio aperiam illo reiciendis accusantium tempora molestiae minima, quidem nesciunt minus commodi, alias odit dolores repellendus! Debitis eaque officiis, sunt id animi repudiandae nisi nesciunt, quis libero consectetur eos quam, eveniet consequatur velit non earum quod iure enim omnis magnam! Quisquam eligendi quis officia veniam harum veritatis sequi numquam vel doloremque nam, molestias cumque debitis nobis quos animi consequatur aut neque vero iure ut maxime perspiciatis, deleniti dolorum. Architecto amet doloribus facere nulla sit dolore soluta aperiam minus est odio distinctio praesentium atque excepturi corporis temporibus optio cupiditate ullam eos consectetur quam, voluptates impedit eaque nam sed. Minima iusto facilis eum tempore quibusdam commodi quae eius placeat obcaecati nesciunt officiis minus, reprehenderit repellendus accusantium porro modi hic quam debitis quasi, dicta, delectus perferendis at maiores aliquam similique. Fuga iusto ducimus accusamus voluptatibus laborum officiis eveniet quas voluptatum neque debitis unde pariatur ipsum temporibus voluptas, magni eos cum, qui nisi. Veritatis obcaecati ipsam similique, sequi minus eum recusandae voluptatum culpa dignissimos doloremque. Ducimus corrupti itaque quos officiis repellat, doloremque ab illo recusandae deserunt inventore. Accusantium accusamus saepe placeat eaque, blanditiis temporibus excepturi consequuntur fugiat hic maiores ea dolorum at impedit, sit porro officiis. Ab nesciunt aspernatur dicta praesentium fuga esse natus voluptatibus consectetur dolore, at obcaecati ratione ut, veniam nemo vel quis ipsa repellat, adipisci suscipit eaque explicabo. Aliquam nemo quod, ut earum at, consequatur, cupiditate ad suscipit delectus voluptatem dolorem ea iusto eaque soluta deserunt explicabo ipsum rerum expedita aspernatur quo. Deserunt quibusdam distinctio in, maiores officia, libero id neque dicta impedit, corporis culpa pariatur. Molestias doloribus tempora ipsam magnam reprehenderit, necessitatibus ut quod aliquid voluptatibus, veritatis? Ipsum debitis, incidunt itaque dolor voluptatem consequuntur dicta, assumenda deserunt iusto porro fugiat delectus quia rerum iure voluptates, sed? Necessitatibus ipsum, corporis voluptatibus, consequatur culpa cum dolore nostrum, inventore harum perferendis fugiat vel, est. Possimus dignissimos esse labore, debitis, aperiam iure iste dicta, doloremque rerum consequatur ex vel sunt magni voluptatibus dolore suscipit odit voluptatem quis atque temporibus. Eaque accusantium impedit unde. Et fugiat voluptate asperiores, unde eos architecto a esse quam nulla beatae repellendus perferendis, ullam expedita error eius, modi recusandae quisquam. Voluptatem dolorem doloremque tenetur quas eligendi ratione vitae quo nostrum possimus quisquam velit impedit recusandae rerum, iure mollitia molestiae laudantium, eos consequuntur deleniti quae illum corporis vero sit. Est ipsa rerum neque. Itaque eveniet quidem, pariatur. Itaque aut ipsum accusamus laborum alias cupiditate sunt. Hic maiores excepturi quisquam? Ad odio adipisci quasi quos reprehenderit unde quaerat perferendis deserunt, deleniti magni tenetur cupiditate inventore assumenda delectus cumque, quia mollitia nemo amet, aliquid, eius neque tempora! Eaque illum, quae ducimus. Aliquid libero veritatis illo blanditiis temporibus debitis possimus doloribus aliquam cum, officia sed quo sapiente deserunt adipisci unde quos voluptate, officiis consequuntur voluptatum nobis pariatur. Libero deserunt accusantium sequi ipsum dolorem officiis veniam consectetur unde, quasi aspernatur est delectus minus expedita iure. Voluptatibus placeat tempora, et iusto libero eius excepturi voluptas quisquam, maxime. Voluptatum repellendus necessitatibus esse, quaerat dignissimos iusto dolor debitis aliquam saepe. Accusantium magnam earum, ad ipsum quo ut? Facere ea amet, quibusdam natus voluptatibus, sed quaerat commodi aliquam dolorem ipsum, nostrum ipsam ab provident. Blanditiis unde vitae ipsa quaerat veritatis maxime, voluptatem ducimus provident excepturi reprehenderit veniam facere, asperiores suscipit iusto! Expedita, eveniet molestiae, et eos sunt obcaecati fugiat doloribus similique, labore, laudantium tempora vero placeat animi reprehenderit. Fuga consectetur sit ratione inventore a vitae, facilis tenetur quia placeat maiores. Inventore officia magnam, recusandae cum laboriosam facilis modi quasi, eos aperiam possimus voluptatem, vitae impedit mollitia perspiciatis et quos sapiente soluta! Saepe nostrum illo consectetur. Ratione repudiandae saepe atque mollitia, itaque dignissimos, deserunt dolorem doloremque tempore quisquam animi corporis iusto tenetur, error odio, sunt est voluptas voluptatibus rem maxime vitae ea inventore repellendus consectetur. Dicta autem quam impedit quia aut maxime, omnis modi distinctio iure, cupiditate soluta tenetur libero quo eum in illum laborum totam nesciunt! Nostrum, aliquid vero sapiente delectus molestiae veritatis expedita sunt. Quasi, in. Quos, dolor? Doloremque, similique corporis? Architecto distinctio dignissimos odit ratione earum! Ipsa repudiandae sed, deserunt at fuga mollitia recusandae vel placeat, qui officia adipisci similique maxime, vitae non! Similique provident officia pariatur ut quibusdam, placeat facere. Ex similique aperiam inventore impedit pariatur sit porro quas nihil minima beatae mollitia repudiandae explicabo facere, doloremque eaque illo. Optio vel earum perspiciatis dolore quia repellat unde autem recusandae, tempore minima laudantium et voluptas ipsam at. Maiores obcaecati eveniet autem quam inventore numquam ut rerum dolor illo officiis laborum minus nulla, iusto, dignissimos eius consectetur rem! Consequuntur cupiditate quaerat laborum quis, veritatis illum numquam ad, assumenda ipsa fuga facilis aspernatur maxime velit totam deserunt enim, atque laudantium asperiores aut, dolorum neque molestias modi corporis. Deleniti deserunt, ipsam quo consequuntur modi hic, mollitia possimus eligendi dignissimos eveniet fugiat est cum sapiente quos repellendus, accusamus accusantium.</p>
</article>
</main>
Must do something like that?
– Bruno Wego
Post what you’ve already done.
– Diego Souza
I edited the question and entered the code, Bruno, this is exactly what I need, a menu that regardless of how many items you have, goes to the end of the page, the way it is, if the menu has 3 items, it is small and ends after the items.
– Alan Almeida
Change the class that controls that part of the MENU. Add
height: 100%
.– Diego Souza
like this? http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/
– Paulo Mendonça
Exactly that Paul.
– Alan Almeida