使绝对定位div扩大父div高度

正如你在下面的CSS中看到的，我希望child2将自己定位在child1之前。这是因为我目前正在开发的网站也应该在移动设备上工作，其中child2应该在底部，因为它包含我想在移动设备上的内容下面的导航。-为什么不是2本杰作?这是唯一的2 divs在整个HTML中被重新定位，所以2个母版对于这个微小的改变是多余的。

HTML:

<div id="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>

CSS:

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

child2具有动态高度，因为不同的子站点可以有或多或少的导航项。

我知道绝对定位的元素被从流中移除，因此被其他元素忽略 我试着在父div上设置overflow:hidden;，但这没有帮助，clearfix.

.

我最后的手段将是JavaScript来相应地重新定位两个divs，但现在我将尝试看看是否存在一个非JavaScript的方式来做这件事。

380209 次浏览
小开
最佳答案

你自己回答了这个问题:“我知道绝对定位元素从流中被移除，因此被其他元素忽略。”你不能根据绝对定位元素来设置父元素的高度。

你要么使用固定高度，要么需要使用JS。

现在可以使用CSS flexbox[1]或grid[2]来反转父容器内HTML元素的可视顺序，而不使用position: absolute;。

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#alignment_and_flex-direction
    2. <李> https://developer.mozilla.org/en-US/docs/Web/CSS/grid或 李CSS网格布局中列的反向顺序 < / >
小开

Feeela是正确的，但是你可以让父元素div收缩或扩展到子元素，如果你像这样反转你的div定位:

.parent {
position: absolute;
/* position it in the browser using the `left`, `top` and `margin`
attributes */
}


.child {
position: relative;
height: 100%;
width: 100%;


overflow: hidden;
/* to pad or move it around using `left` and `top` inside the parent */
}

这应该对你有用。

小开
我也有类似的问题。 为了解决这个问题(而不是使用主体，文档或窗口计算iframe的高度)，我创建了一个div来包装整个页面内容(例如，一个id="page"的div)，然后我使用它的高度。

小开

这和@ChrisC的建议非常相似。它不是使用绝对定位元素，而是使用相对定位元素。也许对你有用

<div class="container">
<div class="my-child"></div>
</div>

你的css是这样的:

.container{
background-color: red;
position: relative;
border: 1px solid black;
width: 100%;
}


.my-child{
position: relative;
top: 0;
left: 100%;
height: 100px;
width: 100px;
margin-left: -100px;
background-color: blue;
}

https://jsfiddle.net/royriojas/dndjwa6t/

小开

虽然不能使用position: absolute扩展到元素，但通常有一些解决方案可以避免绝对定位，同时获得相同的效果。看看这个小提琴，解决了你的特定情况下的问题http://jsfiddle.net/gS9q7/

诀窍是通过浮动两个元素来反转元素顺序，第一个元素右移，第二个元素左移，所以第二个元素先出现。

.child1 {
width: calc(100% - 160px);
float: right;
}
.child2 {
width: 145px;
float: left;
}

最后，向父类添加一个clearfix就完成了(完整的解决方案参见小提琴)。

通常，只要具有绝对位置的元素位于父元素的顶部，就很有可能通过浮动元素来找到解决方法。

小开

现在有更好的办法了。你可以使用bottom属性。

    .my-element {
position: absolute;
bottom: 30px;
}
小开

我想出了另一个解决方案，虽然我不喜欢，但却能完成任务。

基本上以不可见的方式复制子元素。

<div id="parent">
<div class="width-calc">
<div class="child1"></div>
<div class="child2"></div>
</div>


<div class="child1"></div>
<div class="child2"></div>
</div>

CSS:

.width-calc {
height: 0;
overflow: hidden;
}

如果这些子元素包含很少的标记，那么影响就会很小。

小开

有一个很简单的方法可以解决这个问题。

你只需要在相对div中复制child1和child2的内容，在父div中使用display:none。使用child1_1和child2_2。把child2_2放在上面，child1_1放在下面。

当你的jquery(或任何东西)调用绝对div，只需设置相应的相对div (child1_1或child2_2)与display:block和可见性:隐藏。相对子元素仍然是不可见的，但是会使父元素的div更高。

小开

试试这个，对我很管用

.child {
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
z-index: 1;
}

它将把子高度设置为父高度

小开

“你要么使用固定高度，要么就需要让JS参与进来。”

下面是JS的例子:

---------- jQuery JS示例--------------------

    function findEnvelopSizeOfAbsolutelyPositionedChildren(containerSelector){
var maxX = $(containerSelector).width(), maxY = $(containerSelector).height();


$(containerSelector).children().each(function (i){
if (maxX < parseInt($(this).css('left')) + $(this).width()){
maxX = parseInt($(this).css('left')) + $(this).width();
}
if (maxY < parseInt($(this).css('top')) + $(this).height()){
maxY = parseInt($(this).css('top')) + $(this).height();
}
});
return {
'width': maxX,
'height': maxY
}
}


var specBodySize = findEnvelopSizeOfAbsolutelyPositionedSubDivs("#SpecBody");
$("#SpecBody").width(specBodySize.width);
$("#SpecBody").height(specBodySize.height);
小开

还可以考虑下一个方法:

CSS:

.parent {
height: 100%;
}
.parent:after {
content: '';
display: block;
}

另外，因为你试图重新定位div考虑css网格

小开

绝对视图将自己定位于最近的不是静态定位的父视图(position: static)，因此如果你想要一个定位于给定父视图的绝对视图，将父视图position设置为relative，将子视图position设置为absolute

小开

有一个非常简单的黑客解决这个问题

下面是一个代码和框，说明了解决方案:https://codesandbox.io/s/00w06z1n5l

超文本标记语言

<div id="parent">
<div class="hack">
<div class="child">
</div>
</div>
</div>

CSS

.parent { position: relative; width: 100%; }
.hack { position: absolute; left:0; right:0; top:0;}
.child { position: absolute; left: 0; right: 0; bottom:0; }

您可以使用hack div的定位来影响子控件自身的位置。

下面是一个片段: 

html {
font-family: sans-serif;
text-align: center;
}


.container {
border: 2px solid gray;
height: 400px;
display: flex;
flex-direction: column;
}


.stuff-the-middle {
background: papayawhip
url("https://camo.githubusercontent.com/6609e7239d46222bbcbd846155351a8ce06eb11f/687474703a2f2f692e696d6775722e636f6d2f4e577a764a6d6d2e706e67");
flex: 1;
}


.parent {
background: palevioletred;
position: relative;
}


.hack {
position: absolute;
left: 0;
top:0;
right: 0;
}
.child {
height: 40px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
    <div class="container">
<div class="stuff-the-middle">
I have stuff annoyingly in th emiddle
</div>
<div class="parent">
<div class="hack">
<div class="child">
I'm inside of my parent but absolutely on top
</div>
</div>
I'm the parent
<br /> You can modify my height
<br /> and my child is always on top
<br /> absolutely on top
<br /> try removing this text
</div>
</div>

小开

使用纯JavaScript，你只需要使用getComputedStyle()方法检索你的static position子元素.child1的高度，然后使用HTMLElement.style .style属性将检索值设置为同一子元素的padding-top。

检查并运行下面的代码片段，以获得我上面描述的一个实际示例:

/* JavaScript */


var child1 = document.querySelector(".child1");
var parent = document.getElementById("parent");


var childHeight = parseInt(window.getComputedStyle(child1).height) + "px";
child1.style.paddingTop = childHeight;
/* CSS */


#parent { position: relative; width: 100%; }
.child1 { width: auto; }
.child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
html, body { width: 100%;height: 100%; margin: 0; padding: 0; }
<!-- HTML -->


<div id="parent">
<div class="child1">STATIC</div>
<div class="child2">ABSOLUTE</div>
</div>

小开

这个问题是在2012年flexbox之前提出的。使用现代CSS解决这个问题的正确方法是使用媒体查询和移动设备的伸缩列反转。不需要绝对定位。

https://jsfiddle.net/tnhsaesop/vjftq198/3/

HTML:

<div class="parent">
<div style="background-color:lightgrey;">
<p>
I stay on top on desktop and I'm on bottom on mobile
</p>
</div>
<div style="background-color:grey;">
<p>
I stay on bottom on desktop and I'm on top on mobile
</p>
</div>
</div>

CSS:

.parent {
display: flex;
flex-direction: column;
}


@media (max-width: 768px) {
.parent {
flex-direction: column-reverse;
}
}

提交答案