html - 如何扩大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%）。这会将 bar 向右延伸很多，但会添加一个水平滚动条。所以设置以下来简单地隐藏溢出：

html,body
{
   overflow-x:hidden;
}