Html 控制宽度为100%的固定位置元素的宽度_Html_Css

Html 控制宽度为100%的固定位置元素的宽度

html css

Html 控制宽度为100%的固定位置元素的宽度,html,css,Html,Css,我正在与两个难以控制的元素搏斗——导航菜单和背景栏（为了处理不透明度问题而分开）。它们的位置是固定的，因此在滚动过程中保持可见。它们的宽度（应该模仿它们的父对象）设置为100%。不幸的是，当窗口拉伸到足够窄时，其宽度会延伸到父窗口之外这是html的图表： <html> <body> <content> <nav-bar> <nav-menu> ... </content> </body

我正在与两个难以控制的元素搏斗——导航菜单和背景栏（为了处理不透明度问题而分开）。它们的位置是固定的，因此在滚动过程中保持可见。它们的宽度（应该模仿它们的父对象）设置为100%。不幸的是，当窗口拉伸到足够窄时，其宽度会延伸到父窗口之外

这是html的图表：

<html>
<body>
  <content>
    <nav-bar>
    <nav-menu>
    ...
  </content>
</body>
</html>

...

显示应该比描述更容易，因此这里有一个指向页面的链接：

当浏览器拉伸到超出内容的最大宽度时，一切看起来都很好。当浏览器变窄时，导航栏和导航菜单的右端会超出内容宽度。在其他情况下，“Contact”的右边缘应该从content div的右边缘插入20px的填充。最好的方法是向下滚动一个大屏幕，这样菜单就会覆盖一个图像，并且半透明的导航栏是可见的。然后将浏览器拉伸到内容的最大宽度，并在该阈值上来回摆动

有人能告诉我如何保持导航栏和菜单在内容分区的内侧吗

我一直没有在这里列出任何css，因为其中涉及到一些元素，我不知道哪一个是关键元素。我希望这是可以接受的只是张贴一个链接

非常感谢您的阅读。

您有

内容{min width:700px}

，当您的

导航浮动到右侧时，它将停留在那里
如果您可以移除min width
它将自行修复，或者您可以将.nav manu
移动到.content
容器外部，如果您不使用具有min width
的其他东西将其包裹，它将尊重主体/窗口的宽度。非常感谢。我希望始终在图像的右侧对齐的右端。当我删除min width时，会粘在窗口边缘，并失去与图像的对正。自您发表评论后，您是否更改了某些内容？导航保持在我现在查看图像时相对于图像的相同位置。但你的身体上还有一个最小宽度。尝试将li
与%隔开，或使用媒体查询，以防止屏幕变得如此狭窄时，它们中断到另一行。