html - 调整页面大小时如何修复导航栏收缩高度

Question

我正在编写一个复制桌面操作系统外观/感觉的应用程序，当页面调整高度时，页面底部的导航栏高度会缩小。它以某种方式收缩，以至于在某一点变得无法使用。

我已经尝试了一些 CSS 属性，例如使用:position: fixed、position: relative 和 position: absolute。 position: absolute 是所有这些中最好的尝试之一。如果我使用其他任何样式，无论您如何更改样式，导航栏都会停留在顶部。

     body {
        /* these are for the navbar */
        top: 100%;
        margin: 0px;
        padding: 0px;
        /* normal styles */
        font-family: "MS Sans Serif";
        color: white;
        background-color: #008080;
        font-size: 12px;
        /* without this, the page would go blank
        overflow: hidden;
        }
        ul {
        /* this is what works best */
        position: absolute;
        width: 100%;
        top: 96.17%;
        /* normal navbar styling.. */
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: #ffffff;
    }

我希望导航栏能够根据需要正常向上移动，同时保持其属性。相反，导航栏会在调整页面大小时向上移动，但它会变得越来越薄，直到无法使用。 这是一个示例 gif:enter image description here

Answer 1

ul {
  display: flex;
  list-style: none;
  align-items: center;
  flex-flow: row;
  background: red;
  position: sticky;
  max-width: 100vw;
  width: 100%;
  color: wheat;
  height: 50px;
  justify-content: space-around;
}

@media screen and (max-width: 768px) {
  ul {
    transition: .2s all linear;
    height: 45px;
    max-width: -webkit-fill-available;
    width: 100%;
  }
}

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Help</li>
  <li>Contact</li>
</ul>