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>

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

1 个答案: