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

Question

So I have this issue on smaller screens. I want my menu to be 100% height and 100% width - 25px margin on all side. The probleem is when someone has a small screen I can see the header content(text) under my menu because of my 25px botton margin. Is there a way I can fix this?

https://jsfiddle.net/vh2zugku/1/

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;

This may look strange but pls play with the height and see what I mean.

Answer 1

If the background is a solid color, you could just use a border instead of a gap. Just make sure the border is the same color as the document background.

This would look like something along the lines of:

.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;
  ...
}

Also, in lieu of another comment on the question itself, here is a quick fiddle that sets a body class when the menu is opened and removes it when it closes. (This is in response to your comment above.) This class sets the body to position: fixed . It prevents scrolling. You could also use overflow:hidden on the body to achieve a similar effect.