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

Question

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

我尝试在使用 div 标签创建的网页中这样做，但我无法使框拉伸(stretch)并适合浏览器窗口。可以使用 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>