仅限CSS解决方案：在溢出的隐藏元素中隐藏元素，该元素部分落在另一个固定元素之后

Question

我有一个折叠的菜单，其中有动态的项目（图像中的绿色方块）

我还有一个固定项目，需要放在菜单底部-始终。

这可以正常工作，但是现在菜单项有时会被截断，具体取决于屏幕尺寸。如何确保我隐藏了半切的物品？

我已附上一张图片，清楚地说明了它。

我知道我可以使用JavaScript来实现，但是我正在寻找CSS解决方案（如果存在）。如果不存在这样的解决方案，那也是一个答案。

Answer 1

媒体查询可让您将指定的样式设置为不同的媒体尺寸（设备屏幕的宽度和高度）

媒体查询在诸如bootstrap之类的框架中广泛使用，并且被认为是CSS解决方案。

有关更多信息：Responsive Web Design

通过此操作，您将能够使用简单的display: hidden隐藏选择的certein元素，并且只会影响该媒体范围内的元素。

例如：

.div {
  height: 80px;
  color: black;
}

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
  .div {
    color: white;
  }
}
@media screen and (max-width: 678px) , screen and (max-height: 300px) {
  .div {
    color: blue;
  }
}

这将保持高度，但会在每次查询时更改颜色。

希望我的解释很清楚。

如果您不想弄乱CSS加载顺序，也可以在每个更改上使用！important color: white !important;

，它将在声明该颜色样式之前覆盖所有颜色样式。