如何扩展div的正确宽度？

Question

我想将div的正确宽度扩展到100％（看截图，我的div是红色），我试过：

HTML示例：

<header>
    <nav>
        <ul>
            <li>Menu</li>
            <li>Menu</li>
            <li>Menu</li>
        </ul>
    </nav>
    <aside>
        <h1>Logo</h1>
    <aside>
</header>

CSS：

header {
    width: 1024px;
    height: 395px;
    margin: 0 auto;
}

nav {
    height: 60px;
    width: 690px;

    position: absolute;
    top: 20px;
    right: 0;

    background:red;
}

这很好但是当我尝试缩小（ctrl - ）时，菜单导航列表从容器中出来。徽标保持居中但不导航。

感谢您的帮助！ 抱歉我的英语不好。

Answer 1

我认为你正在寻找这个：jsfiddle。将position: relative添加到标题中。之后，您的导航定位将相对于您的标题。为了正确对齐，您可以将导航top: 20px更改为top: 0。

Answer 2

如果您希望红色条始终延伸到窗口的右边缘，即使放大和缩小浏览器窗口，也可以将此条的宽度设置为非常高的值（例如500％）。这将向右延伸很多条，但会添加一个水平滚动条。 因此，设置以下内容只是隐藏溢出：

html,body
{
   overflow-x:hidden;
}