如何在保持最小高度的同时用CSS固定图层的位置？

Question

我有一个两列布局，其中左侧由一个应该粘贴的菜单组成，右侧包含一个长形式。在页面底部是一个页脚：

这有两个问题：

1. 如果浏览器窗口小于菜单高度，则无法查看下方的菜单项，因为它已修复，因此无法滚动。
2. 如果向下滚动表单到底部，菜单将隐藏页脚



我的CSS看起来像这样：

#menu_side{
    color:black;
    background-color: #ffffff;
    margin:67px 5px 5px 5px;
    position: fixed;
    width: 250px;
}   

作为评论中提到的替代方案，可以使用容器作为菜单并使用vh。不幸的是，这似乎不起作用，因为内部元素只是简单地超过了div。在这个img中有一个带有红色边框的容器：



当我向下滚动表格并同时解决上述两个问题时，我怎么能设法让用户看到菜单？感谢您对此提供任何帮助。

Answer 1

您应该将#menu_side包装在一个新容器中，并让该容器为fixed，并确保其height等于视口高度。这可以使用vh单位或使用Javascript完成。

<div class="menu_container">
    <div id="menu_side">
        <!-- your menu -->
    </div>
</div>

CSS：

.menu_container{
  position: fixed;
  height: 100vh;
  width: 260px;
  left: 0;
  top: 0;
}

#menu_side{
  margin:67px 5px 5px 5px;
}

关于你的第二个问题：最好用Javascript来实现。例如，您可以计算页脚元素的可见高度，并使用Javascript计算.menu-container的适当高度