Question

所以我在小屏幕上有这个问题。我希望我的菜单高度为100％，宽度为100％ - 所有方面的边距均为25px。问题是当有人有一个小屏幕我可以看到我的菜单下的标题内容（文本），因为我的25px botton边距。有没有办法解决这个问题？

position: absolute;
top: 25px;
right: 25px;
left: 25px;
z-index: 1;
height: calc(100% - 50px);
margin: auto;
color: white;
background: $Black;
opacity: 0;
visibility: hidden;
padding: 0;
overflow: hidden;

这可能看起来很奇怪，但请玩高度，看看我的意思。

Answer 1

如果背景是纯色，则可以使用边框而不是间隙。只需确保边框与文档背景颜色相同。

这看起来像是：

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  /* height is removed but you could set it to 100% */
  border: 25px solid #F3F5F6;
  ...
}

此外，代替对问题本身的另一个评论，here is a quick fiddle在菜单打开时设置一个body类，在关闭时将其删除。（这是对上述评论的回应。）此类将正文设置为position: fixed。它可以防止滚动。你也可以在身体上使用overflow:hidden来达到类似的效果。

如何使菜单的最小高度与我的标题相同？

1 个答案: