如何使固定导航栏可滚动[重复]

Question

我试图让我的导航栏在用户向下滚动时跟随页面顶部，所以我使用了固定定位，确实为我这样做，但问题是一旦用户将他们的页面宽度减小到小于设置的最小宽度，页面的内容可以滚动查看，但是导航栏中的一些项目会被截断，你不能 滚动查看其余项目。当导航栏未设置为固定且当前页面宽度

这是我用于导航的 CSS：

nav{
  min-width: 900px;
  position: fixed;
  background-color:white;
  width: 100%;
}

nav img{
  display: block;
  margin: 0 auto;
  width: 25%;
  padding-top:5px;
  padding-bottom: 15px;
}

nav li{
    font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-block;
  padding: 10px 50px 0px 10px;
}
nav a{
  color: white;
  text-decoration: none;
}
nav ul{
  margin: 0;
  height: 30px;
  background-color: black;
}

这是完整的网站网址：http://cydronixweb.kkhorram.info/

Answer 1

如果您同时删除 body 和 nav 上的最小宽度规则，则内容开始缩小并填满屏幕空间。就个人而言，我认为这是一个完美的方法。但是，因为您在导航上也有明确的高度，所以您的 li 开始下降。只需移除高度，在 ul 的顶部和底部添加一些填充物，我想你会很好的。

body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: Helvetica, Sans-Serif;
}

nav ul {
  margin: 0;
  padding: 10px 0;
  background-color: black;
}

nav li {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-block;
  padding: 10px 50px 0px 10px;
}