html

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) 重点关注文本 inside .dropdown, 这个问题的重点是整个 <div>.

Answer 1

理论上，您不能那样做。由于父项的行为导致子项 width 为 conducted/relative，因此您需要指定具有全页宽度的父项或将 position: absolute; 设置为子项。

Answer 2

努力做到

body {
    position: relative;
}

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

html - 使 <div> 与页面一样宽，同时在另一个 <div> 内

html - Make a <div> as wide as the page, while inside another <div>

css

width