249

正如您在下面的 CSS 中看到的，我想child2将自己定位在child1. 这是因为我目前正在开发的网站也应该在移动设备上运行，child2应该在底部，因为它包含我想要的导航，位于移动设备上的内容下方。- 为什么不是 2 个母版页？这是在整个 HTML 中重新定位的唯一 2 个divs，因此这个微小更改的 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具有动态高度，因为不同的子站点可能具有或多或少的导航项。

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

我最后的手段是 JavaScript 来divs相应地重新定位这两者，但现在我将尝试看看是否存在非 JavaScript 方式来执行此操作。

4

15 回答 15

176

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

您要么使用固定高度，要么需要涉及 JS。

于 2012-08-22T10:20:02.607 回答
20

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

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

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

最后，向父级添加一个 clearfix 就完成了（请参阅fiddle以获得完整的解决方案）。

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

于 2013-11-08T18:32:36.423 回答
13

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

您只需在父 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 更高。

于 2015-11-18T19:09:06.507 回答
11

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 */
}

这应该适合你。

于 2013-04-25T12:55:07.973 回答
9

这个问题是在 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;
  }
}
于 2019-11-05T02:58:04.383 回答
5

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

于 2019-01-19T19:26:45.107 回答
4

有一个非常简单的 hack 可以解决这个问题

这是一个说明解决方案的代码框：https ://codesandbox.io/s/00w06z1n5l

HTML

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

于 2018-11-24T01:20:02.150 回答
3

我想出了另一个解决方案，我不喜欢但可以完成工作。

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

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

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

于 2015-07-31T14:28:58.267 回答
2

我有一个类似的问题。为了解决这个问题（而不是使用正文、文档或窗口计算 iframe 的高度），我创建了一个包含整个页面内容的 div（例如，一个 id="page" 的 div），然后我使用了它的高度。

于 2013-07-02T16:16:06.333 回答
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);
于 2018-02-28T20:06:33.057 回答
0

这与@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/

于 2013-10-11T01:23:48.530 回答
0

现在有更好的方法来做到这一点。您可以使用底部属性。

    .my-element {
      position: absolute;
      bottom: 30px;
    }
于 2015-03-19T05:48:19.570 回答
0

还要考虑下一种方法：

CSS：

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

另外，由于您正在尝试重新定位 div，请考虑 css 网格

于 2018-05-01T17:51:19.900 回答
-2

绝对视图将自己定位在最近的非静态定位的祖先（position: static）上，因此如果你想要一个绝对视图定位在给定的父级上，请将父级设置position为relative，将子级设置position为absolute

于 2018-08-21T10:00:29.107 回答
-4

试试这个，它对我有用

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

它将子高度设置为父高度

于 2016-10-18T04:31:59.600 回答