javascript - 菜单位置相对于媒体查询的文档高度

Question

我用 javascript 修改了菜单的 css。我尽量避免“溢出:滚动”。

1. 当内容高度小于文档高度时，菜单的“位置:固定”。

2. 否则我设置“position: absolute”并将高度设置为文档高度。它按我想要的方式工作。

是否可以仅使用@media 查询来执行此操作？谢谢

Answer 1

您无法使用 CSS 检查内容的高度。如果您可以在要切换的位置给出一个数字高度，则可以设置断点，但您无法比较内容高度和文档高度。

div{
  position: absolute;
  height: 100%;
}
@media (max-height: 300px){ //Has to be a set number
  position: fixed;
  height: 300px;
}

看，它需要是一个固定的数字。