最初的模版202610

<!DOCTYPE html>
<html lang="ZH-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    
<div class="app" id="app">
    <aside class="sidebar">导航</aside>
    <div class="main">
        内容
    </div> 
</div>

</body>
</html>

　　

.sidebar{
    background: #eee;
    border:1px dashed #000;
}
.main{
    background:#fff;
    border:1px dashed #000;
}

　　第二部：

.sidebar{
    background: #ccc;
    border:1px dashed #000;
}
.main{
    background:#fff;
    border:1px dashed #000;
    min-width: 0;
}
.app{
    display:grid;
    grid-template-columns: 262px minmax(0, 1fr);
}

　　第三步：

:root{
    --sidebar-w: 262px;
    --topbar-h: 62px;
}

.app{
    display:grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100dvh;
}

.sidebar{
    background: #ccc;
    border:1px dashed #000;
}
.main{
    background:#fff;
    border:1px dashed #000;
    min-width: 0;
}

　　第四步：最初的外壳

:root{
    --sidebar-w: 262px;
    --topbar-h: 62px;
    --bg-surface:#f5f5;
    --border:#000;
}

.app{
    display:grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100dvh;
}

.sidebar{
    position: sticky;
    top: 0;
    height: 100dvh;
    display:flex;
    flex-direction: column;
    background: var(--bg-surface);
    border:1px dashed var(--border);

}
.main{
    background:#fff;
    border:1px dashed var(--border);
    min-width: 0;
}