要让侧边导航完全高度,而不考虑内容的大小,可以使用CSS的flex布局来实现。以下是一种常见的实现方法:
HTML结构:
<div class="container">
<div class="sidebar">
<!-- 侧边导航内容 -->
</div>
<div class="content">
<!-- 主要内容 -->
</div>
</div>
CSS样式:
.container {
display: flex;
}
.sidebar {
flex: 0 0 auto;
/* 设置侧边导航的宽度 */
width: 200px;
/* 设置侧边导航的背景色等样式 */
background-color: #f1f1f1;
}
.content {
flex: 1 1 auto;
/* 设置主要内容的宽度 */
width: 100%;
/* 设置主要内容的背景色等样式 */
background-color: #fff;
}
上述代码中,通过将容器设置为flex布局,侧边导航和主要内容会自动占据剩余的空间。其中,.sidebar
的flex
属性设置为0 0 auto
,表示不伸缩,宽度由内容决定;.content
的flex
属性设置为1 1 auto
,表示伸缩,宽度由剩余空间决定。
这样设置后,无论侧边导航的内容多少,都会自动撑开到容器的高度,实现了侧边导航的完全高度。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云