html - 绝对定位父级的子级 div 未占据页面的全高

Question

我在处理的元素中遇到错误问题。

我想在小于 768px 时占据视口(viewport)全高的移动菜单即使我将其设置为 100% 也没有高度。

它只会在使用汉堡包图标切换时可见。

nav 元素是绝对定位，移动菜单是 nav 元素的最后一个子元素。

nav 元素是绝对定位，因此背景是透明的，它下面的部分 可以位于页面顶部。

我希望类 mobile_links 的 div 在移动设备上切换时占据页面的整个高度。

我有一个解决方法，就是将 nav 下方的 section 的 position 属性设置为 relative 并设置 top: -40px。

我必须将 nav 元素的 position 属性设置为 static 才能正常工作。

但是，我不喜欢这样，因为它在页面上的两个 section 元素之间留下了一个空格。

有没有办法让移动菜单的高度达到 100%，而无需更改我目前拥有的 position 属性？

这是我正在谈论的页面的链接:https://carifood-init.appspot.com/

Answer 1

要解决您的 height: 100% 问题，请查看这篇文章:

• Working with the CSS height property and percentage values

作为替代方案，使用 height: 100vh。

来自规范:

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

• vw unit - Equal to 1% of the width of the initial containing block.
• vh unit - Equal to 1% of the height of the initial containing block.
• vmin unit - Equal to the smaller of vw or vh.
• vmax unit - Equal to the larger of vw or vh.

Browser Compatibility (视口(viewport)单元在主流浏览器中几乎完全支持，除了 IE 9、10 和 11，而 Edge 不支持 vmax)