css - 如何使导航菜单拉伸并适合浏览器窗口的边框？

Question

在某些网站中，例如这个网站，显示各种选项和链接（如搜索、聊天、问题、标签等）的蓝色框的边框被拉伸并适合浏览器窗口。

我尝试在使用 div 标签创建的网页中这样做，但我无法使框拉伸并适合浏览器窗口。可以使用 div 标签完成吗？或者还有其他方法可以用于例如 CSS 吗？

我不想使用 jQuery 或 AJAX。

Answer 1

是的，DIV 非常适合制作填充到边缘的导航菜单。

您遇到的最可能的问题是您在另一个具有规则的 DIV 中创建 DIV。

例如

CSS

.container {width:768px;}
.menu {width:1000px;}

HTML

<div class="container">
    <div class="menu">
    The Menu Would Go here
    </div>
</div>

现在正如您在上面的示例中看到的那样，您在容器中有一个菜单 - 现在因为容器的宽度是 768px，所以菜单不能不是 1000px，因为 768px 是第一个容器设置的最大尺寸。

现在有几种方法可以解决这个问题并使用 position:absolute;

因此，假设您希望您的菜单 100% 宽以到达边缘，并且您希望菜单位于顶部，它在 CSS 中将如下所示。

让我们把它付诸实践，看看会发生什么，这样你就知道从这里开始该做什么了：P

CSS

.container {min-height:500px;background:#000;width:300px;margin:120px auto;}
.menu {
  position:absolute; /* Tells Menu to ignore the size and position of container */
  background:#CCC;
  width:100%; /* This tells the the Div to be 100% in Width */
  top:0; /* This sets the menu to the top increase number for distance */
  left:0; /* This sets where it should start from left to right */
  height:100px; /* This sets the height of the menu */
  }

这是我刚刚制作的示例中的演示：http: //jsfiddle.net/9j2pa/ 玩弄它并习惯发生的事情。

此外，您始终可以将 MENU 移出容器，例如：

<div class="menu">
The menu is not contained within the container and width:100% will work.
</div>
<div class="container">
The rest of the site is contained within here
</div>