Question

我试图用css为我的网站制作一个固定的导航栏。当我调整浏览器大小时会出现问题。当我调整浏览器窗口大小时，导航栏中的元素将从视口中移出。

this网站存在类似问题。当你向下滚动一点时，你应该看到＆＃34;产品＆＃34;具有固定定位的元素。现在尝试调整浏览器窗口宽度，直到您看不到＆＃34;职位列表＆＃34;，＆＃34;公司页面＆＃34;，＆＃34;候选搜索＆＃34;链接。您的浏览器应该为您提供滚动条以在页面内滚动。当您向右滚动时，页面内容将滚动到，但此滚动不会影响＆＃34;产品＆＃34;元件。

#header {
top:0px;
left:0px;
position:fixed;
height:50px;
width:100%;
z-index:100;
background:rgb(0, 0, 0);
background:rgba(0, 0, 0, 0.8);
padding-top:10px;
}

#nav_bar {
color:#FFFFFF;
width:894px;
margin:0 auto;
background:rgb(255, 255, 255);
background:rgba(255, 255, 255, 0.3);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:3px;
font-weight:bold;
}

a{
color:#FFFFFF;
text-decoration:none;
color:#F9BF3B;
background:rgb(137, 196, 244);
background:rgba(137, 196, 244, 0.5);
text-decoration:none;
}

#navlink {
text-decoration:none;
display:inline-block;
padding-top:10px;
padding-bottom:10px;
width:100px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
text-align:center;
}

有什么想法解决这个问题吗？谢谢。顺便说一句this是我的代码

Answer 1

您的问题的主要答案是：

您无法滚动整个页面（包含导航栏），因为您使用position：fixed。

http://quirksmode.org/css/css2/position.html

位置：固定的元素从正常流量中取出页面并定位在相对于浏览器的所需坐标处窗口。无论滚动如何，它都保持在该位置。

在您的情况下，如果您想保持导航栏位置：已修复，并且在调整窗口大小时可以访问所有导航链接，我有一个更好的建议：，更改您在像素成百分比，你的元素将是流动的。如果您希望布局流畅，切勿使用像素宽度值。

以下是更新后的代码：http://jsfiddle.net/httg1e2w/3/

PS：重要提示：您在HTML中多次使用“navlink”。 ID应该是唯一的。请改用类。这可能会让您在旧版浏览器中感到头疼。

<a href="..." class="navlink">link</a>

固定定位元素不适应窗口/视口的宽度

1 个答案: