CSS-如果不完全可见，固定侧导航应滚动/移动

我有一个固定标题和固定侧导航，并滚动内容的网站

我发现在某些页面上，屏幕较小的用户无法访问所有菜单项，因为固定侧导航延伸到屏幕底部

这有什么办法吗

我做了一个快速的模型来说明

---

如果你缩小浏览器，然后看到屏幕底部的左栏消失了，无法滚动到它，一切都会好起来。

我可以想出添加的解决方案

    overflow: scroll;

到你的CCS（我在你的小提琴上做的）。这很难看，但是你的访客必须购买新的屏幕。。。

---

或者你可以调整字体大小

使用媒体查询，您可以检测视口的大小，然后有条件地设置侧边栏的相应样式（如果视口的高度太小，可以将侧边栏放在所有内容之后）

作者Ethan Marcotte很好地解释了响应式站点可以实现的功能，同时演示了如何处理不同的视口

---

关键是使用媒体查询来正确处理不同的视口。

对于屏幕较小的用户，您可能应该使用媒体查询来更改固定导航的样式。更小的字体大小，填充，等等

---

Chris Coyier在这里有一篇很好的文章解释CSS媒体查询

hmmm。我可以忍受丑陋，但当我添加overflow:scroll时，它不起作用，因为div似乎没有意识到它挂在屏幕底部。所以隐藏的内容只是保持隐藏。如果我固定导航div的高度，也许它会起作用，但我不确定我是否想这样做，因为那样我就必须设置一个小尺寸，以满足少数用户的需要，甚至大屏幕用户也必须滚动菜单。谢谢你的提示。我要好好读一读。除非我遗漏了一些东西，虽然它不能解决IE7的问题，但我仍然必须支持它。谢谢你的提示。我要好好读一读。除非我遗漏了一些东西，虽然它不能解决IE7的问题，但我仍然必须支持它。您可以始终使用respond.js来支持传统IE对媒体查询的支持：