在整个页面上展开导航栏答案

【问题标题】：spread nav bar across whole page在整个页面上展开导航栏
【发布时间】：2013-02-20 20:25:22
【问题描述】：

我正在做一些响应式 CSS，我想要这样的东西：

<body>
<nav>
<ul>
 <li>Asd</li>
 <li>sdf</li>
</ul>
</nav>
<table>
 (Some wide table goes here)
</table>

我将导航定义为页面顶部的条（=水平条）。小屏幕（表格太大时）会出现水平滚动条。

我的问题是，当我水平滚动时，导航栏会向左移动并在右侧留下一个空白区域。我只是希望它是可见的，以保持酒吧的印象。有什么想法吗？

我知道，其中之一是位置：固定，因此导航保持固定，但这也意味着即使使用垂直滚动，导航也会固定，这是我不想要的。

我只希望它与整个页面一样宽（而不仅仅是与屏幕一样宽），同时还可以垂直滚动。（如果导航内容在水平滚动时也滚动，或者导航内容只是被滚动并且只有导航背景（和导航边框等），这对我来说并不重要）

【问题讨论】：

【解决方案1】：

使用 CSS，position:absolute; left:0;（在页面滚动时阻止它从网络屏幕的左侧移开。）

【讨论】：

抱歉，您可能误解了我的意思。我不介意导航移动，我的问题是它不适合所有可用空间（它只有一个屏幕宽，我需要它覆盖整个页面（例如，两个、三个、千个屏幕，具体取决于其他内容的宽度））
噢噢噢！我的错，我会为此研究 javascript。
你在建议什么 JS？我一整天都在尝试这样做，但是在调整页面大小时仍然存在一些错误，我实际上设法执行了将paddingRight 添加到导航的脚本，因此它填充了整个document.body.scrollWidth，但我遇到了问题调整页面大小时，因为 padding 太大（这会导致页面实际上比需要的大并显示不需要的水平滚动条）
我不知道，我不熟悉 Javascript。我将您的问题重新标记为其中包含“Javascript”。

【解决方案2】：

我不确定我是否完全理解您，但我认为解决您的问题的方法是使用 CSS 设置 overflow: hidden 参数。

您可以在内部/外部 CSS 的 <head> 中使用 <style> 标记来执行此操作，如下所示：

<head>
  <style>
    table {
      display: flex;
      overflow: hidden;
    }
  </style>
</head>

否则，您可以使用带有样式属性的内联 CSS 直接添加它，这不会占用太多空间，但仅适用于该特定表格（而不是页面上的所有表格）。例如：

<body>
  <table style="overflow:hidden">
   (Some wide table goes here)
  </table>
</body>

【讨论】：