时间戳

首页 > 解决方案 > 如何制作没有位置的粘性导航栏：已修复

html - 如何制作没有位置的粘性导航栏：已修复

问题描述

我有一个HTML模板，我需要在不使用的情况下固定他的左侧边栏（不滚动），position: fixed因为它会破坏所有模板。

期望的输出

<div class="layout-w">

    <!-- menu -->
    <div class="menu">
         <!-- elements here -->
    </div>

    <!-- content -->
    <div class="content">
        <!-- Elements here -->
    </div>

</div>

这就是CSS

.layout-w {
    display: flex;
}

.menu {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
}

我怎样才能做到这一点？

标签： htmlcss

解决方案

您可以将您的菜单 div 放在另一个高度为 100% 且背景颜色为：透明的 div 中。

<div class="layout-w">

<!-- menu -->
<div class="menu-container">
    <div class="menu">
     <!-- elements here -->
     </div>
</div>


<!-- content -->
<div class="content">
    <!-- Elements here -->
</div>

并在 css 文件中：

.menu-container { height: 100%; background-color: transparent; }
.menu { postion: fixed }

推荐阅读