I am trying to create a fluid container with a scrollable and fixed sidebar and with a fluid content, setting the container width to the available screen without vertical scrollbar, and setting the sidebar width to a fixed and specific width and the content width to 100% width.
I have tested with the following questions:
- Adjust grid height to available screen without scrollbar
- Two columns layout with fixed sidebar
- Prevent grid area from expanding causing whole page to scroll
I also have tested with the inspector tool, and I didn't find any anomalies. I unsetted plenty of properties and the document remains vertically scrollable.
You can see that the snippet is still vertically scrollable. And you cannot scroll the fixed sidebar.
Or you can see the small image of how my document is like:
/* Box sizing rules */
*, *::before, *::after
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Remove default margin on body */
body, div, html
{
border: 0;
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
/* Setting "!important" to VSCode Markdown CSS properties */
html, body
{
height: 100%;
margin: 0 !important;
max-width: 100% !important;
padding: 0 !important;
width: 100%;
}
/* Set core body defaults */
body
{
line-height: 1.5;
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
}
li, p
{
margin-bottom: 10px;
}
/* Inspired by Bookdown site sidebar CSS and HTML style */
/* Fluid container with a width set to available screen */
.container
{
display: grid;
grid-template-areas: "summary book";
grid-template-columns: 300px auto;
grid-template-rows: 1fr;
height: 100vh;
width: 100vw;
}
/* Fixed and scrollable sidebar */
.summary
{
background: #FAFAFA;
border-right: 1px solid rgba(0, 0, 0, 0.07);
color: #364149;
font-size: 15px !important;
grid-area: summary;
height: 100%;
-webkit-transition: left 250ms ease;
-moz-transition: left 250ms ease;
-o-transition: left 250ms ease;
transition: left 250ms ease;
width: 100%;
}
.summary nav
{
overflow-y: scroll;
padding: 10px;
position: sticky;
}
/* Fluid content with a width set to available screen */
.book
{
grid-area: book;
height: 100%;
padding: 20px;
width: 100%;
}<body>
<!-- Table of contents -->
<div class="container">
<!-- Sidebar -->
<div class="summary" id="TOC" role="doc-toc">
<!-- Fixed and scrollable -->
<nav role="navigation">
<h2 id="toc-title">Table of Contents</h2>
<ul class="incremental">
<li><a href="example-01">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</a></li>
<li><a href="example-02">Itaque, voluptates? Quidem quaerat natus quisquam sapiente eius.</a></li>
<li><a href="example-03">Quam asperiores ea, iusto minus harum distinctio? Tenetur!</a></li>
<li><a href="example-04">Voluptatibus necessitatibus autem non doloremque eveniet itaque? Ut?</a></li>
<li><a href="example-05">Rem veritatis sapiente alias dicta commodi ipsam eos.</a></li>
<li><a href="example-06">Eligendi fugit ratione beatae expedita modi labore voluptatem?</a></li>
<li><a href="example-07">Debitis voluptatum ducimus tempore nobis quibusdam consequuntur eos.</a></li>
<li><a href="example-08">Perferendis ducimus fugiat praesentium, consequuntur facere amet laudantium.</a></li>
<li><a href="example-09">Sed aspernatur magni ratione saepe, cumque obcaecati voluptate?</a></li>
<li><a href="example-10">Assumenda omnis aliquam nisi necessitatibus? Voluptas, rerum minima?</a></li>
<li><a href="example-11">Cupiditate minima nesciunt impedit dignissimos neque illum doloremque.</a></li>
<li><a href="example-12">Debitis voluptates possimus, accusantium reprehenderit iure ipsa ipsam?</a></li>
<li><a href="example-13">Numquam dolor labore ipsum, unde et vero error.</a></li>
<li><a href="example-14">Quidem et nostrum adipisci ipsa sint voluptas minus.</a></li>
<li><a href="example-15">Quis vitae impedit quas reiciendis fugit cum eos!</a></li>
<li><a href="example-16">Magnam perferendis eos nobis nesciunt minima. Culpa, illum?</a></li>
<li><a href="example-17">Sapiente perspiciatis veritatis delectus fuga, quaerat incidunt tempore?</a></li>
<li><a href="example-18">Cum nam explicabo sunt, quos voluptatum quae perspiciatis?</a></li>
<li><a href="example-19">Iste possimus magnam ex. Vero blanditiis minus aspernatur!</a></li>
<li><a href="example-20">Dignissimos accusamus optio minima molestias illum impedit ipsum.</a></li>
<li><a href="example-21">Quasi distinctio libero modi. Iusto illo recusandae quod?</a></li>
<li><a href="example-22">Explicabo veniam nesciunt sapiente omnis distinctio voluptates incidunt.</a></li>
<li><a href="example-23">Tempore, enim quam sapiente amet laborum molestiae incidunt!</a></li>
<li><a href="example-24">Beatae doloribus, consequatur rerum incidunt porro fuga minus.</a></li>
<li><a href="example-25">Dolore voluptate earum ipsum optio quisquam, numquam ad.</a></li>
<li><a href="example-26">Repellat recusandae iusto hic officia beatae distinctio non!</a></li>
<li><a href="example-27">Voluptates, voluptas ipsum accusamus eveniet quod alias laboriosam.</a></li>
<li><a href="example-28">Iusto aspernatur laborum reiciendis deserunt voluptatum. Iure, dolorum.</a></li>
<li><a href="example-29">Nostrum voluptatibus nam veniam aliquid vero quos officia.</a></li>
<li><a href="example-30">Dicta molestiae cum rem rerum eaque saepe magni.</a></li>
</ul>
</nav>
</div>
<!-- Content -->
<div class="book">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi recusandae iusto fugiat illum ex? Et laboriosam
ratione corporis totam quas eligendi amet error delectus. Aliquam maxime dolorem eos non ex?</p>
<p>Expedita aspernatur sed fugiat ullam delectus laboriosam tempore recusandae deleniti eligendi doloremque natus
alias quos corporis perferendis officiis neque magni mollitia earum et totam, nemo quia praesentium! Iste,
molestias quae.</p>
<p>Blanditiis laudantium beatae, mollitia magnam eos inventore ipsum qui nemo. Deleniti aspernatur libero cumque!
Necessitatibus voluptate perspiciatis adipisci, numquam dolores similique dicta quaerat suscipit molestiae,
consequatur pariatur quia excepturi ratione!</p>
<p>Sapiente impedit aliquid vel beatae in, accusantium repellat ea suscipit similique, odio aliquam quibusdam?
Obcaecati enim aspernatur vel blanditiis repudiandae quos, qui aut in fugit ab corrupti inventore totam ullam.
</p>
<p>Reprehenderit ea nostrum doloribus facere voluptates dolor ipsam vitae corporis blanditiis? Possimus et
perferendis vitae doloribus velit amet fuga architecto hic sit numquam nulla quia quis ullam, cupiditate illo
quaerat!</p>
<p>Rerum id fugit dolorem facilis dolor enim illo dolores nihil tempore, debitis minus voluptate eius inventore?
Beatae reiciendis sit veritatis iusto nostrum magnam excepturi, praesentium, a dolore molestias ea esse?</p>
<p>Laboriosam excepturi deserunt impedit nobis recusandae quia omnis saepe repudiandae, neque voluptatum voluptate
facere amet unde sed dignissimos sunt voluptates! Facilis reprehenderit esse vero voluptatum illum doloremque
mollitia, enim odit!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod ipsum, laborum accusamus, deserunt quia nihil
expedita unde, vel excepturi explicabo molestias! Tempore doloribus ipsum inventore, blanditiis deserunt sit
dolorum nisi.</p>
<p>Harum earum non minus, deleniti exercitationem animi est sunt recusandae ea, reprehenderit necessitatibus odio
expedita ducimus laboriosam, ut aliquid enim. Aliquam maxime dicta suscipit delectus quas quae quisquam,
perspiciatis error!</p>
<p>Quam laudantium doloremque non nemo nulla error mollitia ipsum sint autem debitis eveniet possimus, et, at quis
ad odio repudiandae doloribus neque praesentium natus veniam similique. Aut molestiae ratione facere.</p>
<p>Hic nobis aspernatur tempora provident ab expedita, nesciunt asperiores cumque illum animi maiores dolor,
corporis obcaecati a? Tenetur eius error repudiandae autem beatae sunt, exercitationem, dolores, amet unde
consectetur nostrum.</p>
<p>Doloribus corporis ut vero fugiat culpa voluptate porro nulla sit hic tempora nihil doloremque officia in sed,
autem iusto veritatis, pariatur fugit beatae distinctio consectetur dolorem expedita quam consequatur! Fuga.</p>
</div>
</div>
</body>