我正在与两个不守规矩的元素搏斗——导航菜单和背景栏（分开处理以处理不透明问题）。它们的位置是固定的，因此它们在滚动期间保持可见。他们的宽度应该模仿他们父母的宽度，设置为 100%。不幸的是，当窗口被拉伸得足够窄时，它们的宽度会延伸到父窗口之外。
这是html的示意图：
<html>
<body>
<content>
<nav-bar>
<nav-menu>
...
</content>
</body>
</html>
显示应该比描述更容易，所以这里是页面的链接： http ://www.seanoneill.us/test/index.html
当浏览器拉伸超出内容的最大宽度时，一切看起来都很好。当浏览器变窄时，导航栏和导航菜单的右端会超出内容宽度。换句话说，“联系人”的右边缘应该从内容 div 的右边缘插入 20px 的填充。查看这一点的最佳方法是向下滚动一大块，以便菜单覆盖图像并且半透明的导航栏可见。然后将浏览器拉伸到内容的最大宽度，并在该阈值上来回摆动。
谁能告诉我如何将导航栏和 -menu 保留在内容 div 的内侧？
由于涉及到一些元素，我不知道哪一个是关键元素，所以我没有在这里列出任何 css。我希望只发布一个链接是可以接受的。
非常感谢您的阅读。