Question

我有一个position:fixed且最小高度为calc(100vh - 48px)的移动菜单。顶部设置为48px。在移动菜单中，我将包装器设置为height:100%和overflow:auto。我尝试将其设置为min-height: 100%，但是它不起作用。当内容变高时，内部内容将被隐藏，并且不会滚动。我将溢出设置为自动，然后尝试在移动菜单上滚动，但没有任何效果。是什么原因引起的？

.mobile-nav__menu {
      width: 100vw;
      min-height: calc(100vh - 48px);
      position: fixed;
      top: 48px;
      bottom: 0;
      right: 0;
      visibility: hidden;
      opacity: 0;
      -webkit-transition-property: all;
      -o-transition-property: all;
      transition-property: all;
      -webkit-transition-duration: 0.5s;
           -o-transition-duration: 0.5s;
              transition-duration: 0.5s;
      z-index: 21;
      overflow: auto;
    }
    
    .mobile-nav__menu-wrapper {
      min-height: 100%;
      width: 100%;
      background-color: #fff;
      overflow-y: auto;
    }

Answer 1

尝试在诸如此类的窗口调整大小javascript事件上设置height属性；

var onresize = function() {
   height = document.body.clientHeight;
}
window.addEventListener("resize", onresize);

Answer 2

尝试使用百分比而不是绝对px值。例如，如果您要在高度为1000px的屏幕上设置高度为10px的标题，请输入“ 1％”而不是“ 10px”。这将帮助页眉适应不同的屏幕尺寸。另外，请尝试在CSS类中添加background-size:cover或background-size:100%。

固定计算器和位置的最小高度不适用于移动设备

2 个答案: