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

Question

正如你在下面的CSS中看到的,我希望child2在child1之前定位自己.这是因为我正在开发的网站也应该在移动设备上运行,其中child2应位于底部,因为它包含我想要的导航,在移动设备上的内容之下. - 为什么不是2个主页？这是在整个HTML中重新定位的唯一2个div,因此这个微小变化的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具有动态高度,因为不同的子网站可以具有更多或更少的导航项.

我知道绝对定位元素已从流中移除,因此被其他元素忽略.
我尝试设置child2父div,但这没有帮助,clearfix也没有.

我的最后一招将是javascript来相应地重新定位两个div,但是现在我将尝试看看是否存在这样做的非javascript方式.

Answer 1

你自己回答了这个问题:"我知道绝对定位元素已从流中移除,因此被其他元素忽略." 因此,您无法根据绝对定位的元素设置父级高度.

你要么使用固定的高度,要么需要涉及JS.

Answer 2

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

诀窍是通过浮动两个元素来反转元素顺序,第一个向右,第二个向左,所以第二个首先出现.

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

最后,向父母添加一个clearfix并完成(请参阅完整解决方案的小提琴).

通常,只要具有绝对位置的元素位于父元素的顶部,通过浮动元素就可以找到解决方法.

Answer 3

Feeela是对的,但是div如果你改变你的div定位,你可以让父母签约/扩展到子元素:

.parent{
    postion: 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 */
}

这应该适合你.

Answer 4

有一种非常简单的方法可以解决这个问题.

您只需要在父div中使用display:none复制相对div中child1和child2的内容​​.说child1_1和child2_2.将child2_2放在最顶层,将child1_1放在底部.

当你的jquery(或其他)调用绝对div时,只需使用display:block AND visibility:hidden设置相应的div(child1_1或child2_2).相对的孩子仍然是隐形的,但会使父母的div更高.

Answer 5

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

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;
  }
}

Answer 6

使用纯 JavaScript，您只需要使用getComputedStyle()方法检索static position子元素的高度，然后使用HTMLElement.style属性将该检索值设置为同一子元素.child1的。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>