Question

当用户向下滚动时，我试图让导航栏跟随页面顶部，所以我使用了做为我做的固定定位，但问题是是一旦用户将页面宽度减小到小于已设置的最小宽度，页面的内容可以滚动查看，但导航栏中的某些项目将被切断，你可以＆＃ 39; t 滚动查看其余项目。当导航栏未设置为固定且当前页面宽度<1时。最小宽度，您仍然可以滚动以查看导航栏项的其余部分以及实际页面内容。如果可以的话，我想尽量避免在这个项目中使用JavaScript。

这是我用于导航的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

如果删除正文和导航上的最小宽度规则，事情就会开始缩小并填满屏幕空间。就个人而言，我认为这是一个完美的方法。但是，因为你在导航上也有一个明确的高度，你的李开始失败了。只需移除高度，在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;
}

如何使固定导航栏可滚动

1 个答案: