网页前端布局常用第一步

: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;/* 三段式：brand / nav / footer */
    background: var(--bg-surface);
    border-inline-end:1px dashed var(--border);
    overflow:hidden auto; /* 侧栏内部可以滚，但不溢出到外部 */

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

　　

<!DOCTYPE html>
<html lang="ZH-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 不缓存页面start -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <!-- 不缓存页面end -->
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    
<div class="app" id="app">
    <aside class="sidebar">导航1</aside>
    <div class="main">
        <div style="width: 2000px;background: #9b1a1a;">超宽内容</div>
    </div> 
</div>

</body>
</html>

　

:root {
  --sidebar-w: 262px;
  --topbar-h: 62px;
  --bg-surface: #f5f5;
  --border: #000;
  --dur-slow: 0.42s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sidebar-w-collapsed: 76px;
}

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100dvh;
  transition: grid-template-columns var(--dur-slow) var(--ease); /* 折叠动画 */
}

.app[data-collapsed="true"] {
  grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
}

.app[data-collapsed="true"] :is(
  .brand__text,
  .nav__label,
  .nav__text,
  .nav__badge,
  .nav__chevron,
  .sidebar__foot-text,
  .nav__sublist
) {
  display: none;   /* ⭐ 必须 display:none，不能 opacity:0 + visibility:hidden */
}


.sidebar {
  position: sticky; /* 侧栏吸附 */
  top: 0;
  height: 100dvh; /* 侧栏自身高度占满一屏 */
  display: flex;
  flex-direction: column; /* 三段式：brand / nav / footer */
  background: var(--bg-surface);
  border-inline-end: 1px dashed var(--border);
  overflow: hidden auto; /* 侧栏内部可以滚，但不溢出到外部 */
}
.main {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px dashed var(--border);
  min-width: 0;
}

　　

　

:root {
  --sidebar-w: 262px;
  --topbar-h: 62px;
  --bg-surface: #f5f5;
  --border: #000;
  --dur-slow: 0.42s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sidebar-w-collapsed: 76px;
}

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100dvh;
  transition: grid-template-columns var(--dur-slow) var(--ease); /* 折叠动画 */
}

.app[data-collapsed="true"] {
  grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
}

.app[data-collapsed="true"] :is(
  .brand__text,
  .nav__label,
  .nav__text,
  .nav__badge,
  .nav__chevron,
  .sidebar__foot-text,
  .nav__sublist
) {
  display: none;   /* ⭐ 必须 display:none，不能 opacity:0 + visibility:hidden */
}

.app[data-collapsed="true"] .sidebar__brand {
  justify-content: center;
  padding-inline: 0;
}
.app[data-collapsed="true"] .sidebar__nav {
  padding-inline: 10px;
  align-items: center;
}
.app[data-collapsed="true"] .nav__item {
  justify-content: center;
  gap: 0;
  padding: 10px 0;
}

.sidebar {
  position: sticky; /* 侧栏吸附 */
  top: 0;
  height: 100dvh; /* 侧栏自身高度占满一屏 */
  display: flex;
  flex-direction: column; /* 三段式：brand / nav / footer */
  background: var(--bg-surface);
  border-inline-end: 1px dashed var(--border);
  overflow: hidden auto; /* 侧栏内部可以滚，但不溢出到外部 */
}
.main {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px dashed var(--border);
  min-width: 0;
}