Question

我有一个固定宽度的容器div。我希望其中一个子元素与浏览器窗口一样宽。我会将子元素从父容器中取出，但它会破坏功能。我试过这个：

.parent { width: 960px; position: relative; left: 50%; margin-left: -480px; }
.child { position: absolute; left: 0; right: 0; width: 100%; }

就此：

<body>
    <div class="parent">
        <div class="other">This div's positioning is absolute but dependent on the parent element's relative positioning</div>
        <div class="child>This div wants to be centered and as wide as the browser window</div>
    </div>
</body>

但这不起作用。我有什么可以做的吗？

Answer 1

你想要完成什么？使用position:relative将导致使用position:absolute的任何子元素从父元素的左上角像素开始。如果删除它，position:absolute div中的任何.parent元素都将返回到从body的左上角开始。

假设您正在使用.parent div对 placement 的相对定位，而不是使用子元素定位（应应该如何使用）你可以像这样说出同样的事情：

<body>
    <div class="parent">
        <div class="child">stuff</div>
    </div>
</body>

body { text-align: center; }
.parent { width: 960px; margin: 0 auto; text-align: left;}
.child { position: absolute; left: 0; right: 0; width: 100%; }

jsfiddle有大小和颜色属性来帮助说明这里的内容：http://jsfiddle.net/Ncy5Y/

Answer 2

如果你想保留当前的CSS配置，你应该尝试使用JQuery：

$(function() {
    $('.child').width($(window).width());
});

编辑：

这应该有效并且还响应窗口宽度：

$(function() {
    $('.child').width($(window).width());
    $(window).resize(function(){
        $('.child').width($(window).width());
    });
});

如果需要，您可以创建一个包含重复行的函数。

编辑2：

要将元素左对齐，请使用：

$(function() {
    position();
    $(window).resize(function(){
        position();
    });
})

function position() {
    $('.child').width($(window).width()).offset({left: 0, top: 0});
}

Answer 3

设置块相对于任意容器/祖先（不一定是直接父级）的大小是CSS不支持的需求功能之一。使用现有CSS功能的典型解决方案是将整页分割为具有自己的居中子元素的多个水平线。

例如，在下面的示例中，第二个块的宽度为100％，而第一个和第三个块的宽度有限且居中：

<div class="line" id="first"><div>First line (centered)</div></div>
<div class="line" id="second">Second line (100% width)</div>
<div class="line" id="third"><div>Third line (centered)</div></div>

.line > DIV {
    margin: 0 auto;
    width: 960px;
}

#first > DIV {background: #f00; }
#second      {background: #0f0; }
#third > DIV {background: #00f; }

请参阅live demo。

有没有办法给固定宽度div的子元素宽度等于body元素？

3 个答案: