Question

我有一个容器<div>，其中有另一个容器.dropdown。我希望.dropdown与整个页面具有相同的width。 width: 100%似乎是合理的，但我得到的.dropdown与.container一样宽。

HTML：

<div class='container'>
<nav>
    <ul>
        <li>
            <a href=''>Home</a>
        </li>
        <li>
            <a href=''>Products</a>
            <div class='dropdown'>
                <p>Some content</p>
            </div>
        </li>
        <li>
            <a href=''>About</a>
        </li>
        <li>
            <a href=''>Contact</a>
        </li>
        <li>
            <a href=''>Login</a>
        </li>
    </ul>
</nav>

CSS：

div.container {
    width: 1200px;
    margin: 0px auto;
}
div.dropdown {
    width: 100%;
    left: 0px;
    position: absolute;
}

有什么方法可以解决这个问题？

诚恳，

碧玉

有人轻轻地将此问题标记为重复，但事实并非如此，因为在相关问题（Full width css dropdown menu）侧重于内部 .dropdown内的文字，这个问题主要集中在整个<div>。

Answer 1

理论上，你不能这样做。由于孩子width是由父母的行为指导/相对的，因此您需要指定具有整页宽度的父级或将position: absolute;设置为该子级。

Answer 2

尝试制作

body {
    position: relative;
}

.dropdown {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

html - 使<div>与页面一样宽，而在另一个<div>中

2 个答案: