使用flex布局可以很方便地实现滚动效果的左侧导航栏和右下子内容。具体步骤如下:
<div class="container">
<div class="sidebar">
<!-- 左侧导航栏内容 -->
</div>
<div class="content">
<!-- 右下子内容 -->
</div>
</div>
.container {
display: flex;
height: 100vh; /* 设置容器高度为视口高度 */
}
.sidebar {
flex: 0 0 200px; /* 左侧导航栏宽度固定为200px */
overflow-y: auto; /* 垂直方向溢出内容滚动 */
}
.content {
flex: 1; /* 右下子内容自动填充剩余空间 */
overflow-y: auto; /* 垂直方向溢出内容滚动 */
}
display: flex
将容器设置为flex布局。flex: 0 0 200px
,表示宽度固定为200px,不可伸缩。flex: 1
,表示自动填充剩余空间。overflow-y: auto
用于在内容溢出时显示滚动条。这样,当左侧导航栏或右下子内容的内容超过容器的高度时,会自动出现滚动条,实现滚动效果。
关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,这里无法给出具体推荐。但腾讯云作为一家知名的云计算服务提供商,提供了丰富的云计算产品和解决方案,可以根据具体需求在腾讯云官网上查找相关产品和文档。
领取专属 10元无门槛券
手把手带您无忧上云