JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contents">
	<nav>
		ナビ
	</nav>
	<main>
		<article>記事</article>
		<article>記事</article>
		<article>記事</article>
	</main>
</div>
<footer>
フッター
</footer>

CSS

#contents{
	--top-margin: 100px;
	--left-margin: 100px;
}
nav{
	position: sticky;
	float: left;
	top: var(--top-margin);
	left: 0;
	width: var(--left-margin);
	height: calc(100vh - var(--top-margin));
	background-color: pink;
}
main{
	margin-left: var(--left-margin);
}
article{
	height: 500px;
}
footer{
	height: 500px;
}
main,nav,main,article,footer{
	box-shadow: 0px 0px 0px 1px black inset;
}