DIR : /home/kozerus/public_html/cropex/nav_side.html
/home/kozerus/public_html/cropex
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
:root { --nav-w: 280px; }
/* App fills the viewport */
.app {
height: 100vh;
display: flex;
align-items: stretch;
}
/* Left navigation stays in its own column */
.nav {
width: var(--nav-w);
position: sticky; /* keeps it from scrolling with the content */
top: 0;
height: 100vh;
overflow: auto; /* optional: nav can scroll independently if tall */
border-right: 1px solid #ddd;
background: #fafafa;
}
/* Main content is the scrolling area */
.content {
flex: 1;
overflow: auto; /* scrolling happens here */
height: 100vh; /* ensures it fills viewport */
padding: 16px;
}
</style>
</head>
<body>
<div class="app">
<aside class="nav">
<h3>Navigation</h3>
<ul>
<li><a href="#a">Link A</a></li>
<li><a href="#b">Link B</a></li>
<li><a href="#c">Link C</a></li>
<!-- add many items to test nav overflow -->
</ul>
</aside>
<main class="content">
<h1>Page body</h1>
<p id="a">...</p>
<p id="b">...</p>
<p id="c">...</p>
<!-- add lots of content to make the body scroll -->
<div style="height: 2000px;"></div>
</main>
</div>
</body>
</html>
//