Question

我正在处理我正在处理的项目中的错误。

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

只有在使用汉堡包图标切换时才会显示。

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

nav元素绝对定位，以便背景透明，并且其下方的section可以位于页面顶部。

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

我有一个解决方法，即将position的{{1}}属性设置为section以下nav并设置relative。< / p>

我必须将top: -40px元素的position属性设置为nav，以使其正常工作。

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

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

以下是我正在讨论的网页的链接：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

视口百分比长度是相对于的大小   初始包含块。当初始的高度或宽度   包含块被更改，它们会相应缩放。


vw unit - 等于初始包含块宽度的1％。

vh单位 - 等于初始包含高度的1％   块。

vmin unit - 等于vw或vh中的较小者。

vmax单位 - 等于vw或vh中的较大者。

Browser Compatibility（视口单元在主流浏览器中得到了非常全面的支持，除了IE 9,10和11以及Edge，不支持vmax）

Answer 2

使用jquery完成这项工作：有一个例子我习惯于将一个部分的高度设置为100％的屏幕（取决于观察页面的设备，它将执行更多或更少的高度，因此它具有响应性）。

<script>
$(document).ready(function(e) {
    var wheight = $(window).height();
    $('.section').css("min-height", wheight);
});
</script>

希望它有所帮助！

绝对定位的父级的子级div未占据页面的完整高度

2 个答案: