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

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

html css

Html 有没有办法给固定宽度div的子元素一个等于body元素的宽度？,html,css,position,positioning,Html,Css,Position,Positioning,我有一个固定宽度的容器div。我希望其中一个子元素与浏览器窗口一样宽。我会将子元素从父容器中取出，但它会破坏功能。我试过这个： .parent { width: 960px; position: relative; left: 50%; margin-left: -480px; } .child { position: absolute; left: 0; right: 0; width: 100%; } 关于这一点： <body> <div class="paren

我有一个固定宽度的容器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>


该div的定位是绝对的，但取决于父元素的相对定位
你到底想完成什么？使用position:relative
将导致任何使用position:absolute
的子元素从父元素的左上角像素开始。如果删除该选项，则.parent
div中的任何位置：绝对
元素将返回到主体
的左上角像素处
假设您使用.parent
div的相对定位是为了放置，而不是子元素定位（这是应该使用的方式），您可以实现如下相同的操作：
<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%; }


东西
正文{文本对齐：居中；}
.parent{width:960px；边距：0自动；文本对齐：左；}
.child{位置：绝对；左：0；右：0；宽度：100%；}

jsfiddle带有size和color属性，以帮助说明此处的内容：
如果要保留当前的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});
}

设置块相对于任意容器/祖先（不一定是直接父对象）的大小是CSS不支持的必需特性之一。使用现有CSS特性的典型解决方案是使用自己居中的子元素将整个页面划分为多个水平行
例如，在下面的示例中，第二个块的宽度为100%，而第一个和第三个块的宽度有限且居中：
第一行（居中）
第二行（100%宽度）
第三行（居中）

.line>DIV{
保证金：0自动；
宽度：960px；
}
#第一个>DIV{背景：#f00；}
#第二{背景：#0f0；}
#第三个>DIV{背景：#00f；}

请参阅。
如果在父元素上没有position:relative，则上述操作将有效。我意识到这一点，但我有另一个子元素，其位置取决于父元素的相对位置。可以在父元素内部和其他子元素周围有另一个包装器元素，使其按需要相对。当您将孩子移出父对象时，到底什么会中断？只是修复功能并以不同的方式标记它，这让我感到非常高兴。我支持Matthew。很难理解在父母之外与div发生冲突的原因。。。如果它们一开始是两个独立的div，那么它的嵌套方式又有什么关系呢？我仍然会尽力帮助您，但似乎有更好的解决方案。好的，如果您查看代码，您会注意到.parent
和.other
。它们有匹配的背景图像，当你将鼠标悬停在父对象的各个部分时，我使用JavaScript有选择地显示。other
，这就是它们需要排队的原因。div.child
只是一个导航条，我希望它是整个屏幕的宽度，但是如果我从.parent
中取出它，JavaScript功能会在.child
覆盖的地方中断。这几乎可以工作。但是，子div的宽度不会对窗口宽度的变化做出响应。好的，我们肯定会有所进展。现在它的宽度是正确的，但它与窗口的左侧不对齐。你也能解决这个问题吗？我不知道为什么，但这只是让它看起来好像没有任何JavaScript。它与父div对齐并采用父div的宽度。我有一个相对定位的父div，因为我需要一个不同的子元素，该子元素绝对定位为与父div对齐。然后我有另一个子div，我想将其扩展到窗口的宽度。这两个操作都不能完成。你需要一个在另一个之外。从理论上讲，您可以添加另一个容器，因此在该容器内部可以有parent1
（无位置）包含child1
（绝对位置）和child2
（相对位置）包含child-child1
（绝对位置）。有道理吗？那么<代码>绝对相对绝对
所以。。。我想做的是不可能的吗？实际上，是的，这是不可能的：目前，CSS只允许设置块相对于其直接父元素的宽度。但在大多数情况下，你可以通过使用多条独立的“线”来获得类似的视觉效果，正如我在回答中所描述的。那么，我该如何使用这些线呢？我有点困惑。我在回答中稍微更新了示例。现在，第二个区块有100%的宽度，而第一个和第三个区块居中。好的，那么你可以使用绝对和相对定位使它们重叠，世界上所有的区块都是正确的？