如果子 div 是绝对的，父 div 不会得到高度答案

【问题标题】：Parent div Not getting height if child div is absolute如果子 div 是绝对的，父 div 不会得到高度
【发布时间】：2017-07-10 19:11:30
【问题描述】：

我只是停留在position，我将position:relative 用于父级，position:absolute 用于子级现在父级div 没有得到高度，我不想使用min-height 或height。您可以看到顶部的红色border 是父div border。

fiddle code

.box {
  text-align: center;
  border: 1px solid red;
  width: 500px;
  margin: 0 auto;
  position: relative;
}

.content {
  width: 50%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

<div class="box">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda adipisci vel, dolore aspernatur iste iure blanditiis quam esse repudiandae aperiam debitis doloribus necessitatibus placeat tempora voluptate totam exercitationem neque quae.
  </div>
</div>

请帮帮我？

谢谢

【问题讨论】：

CSS 101：绝对定位使元素脱离正常流动，因此它不能影响其父元素的测量值。 “有人帮我看看我是怎么得到它的吗？” - 得到什么？您完全忽略了在这里描述您真正想要实现的目标。
我想在这里获得父 div 的高度，我将它放在夏天的问题上
那么你不想使用绝对定位，因为正如我刚刚告诉你的那样，那是不可能的。
...或者如果你必须使用绝对的，而不是添加一些Javascript，没有其他办法。

标签： html css css-position

【解决方案1】：

如果您的文本框必须绝对定位，您可以将外框设为绝对。

编辑：由于无法编辑 HTML 结构，您需要特定的高度或一些 JavaScript。 More Information about position

.box {
  text-align: center;
  border: 1px solid red;
  width: 500px;
  margin: 0 auto;
  position: absolute;
}

.content {
  width: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

<div class="box">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda adipisci vel, dolore aspernatur iste iure blanditiis quam esse repudiandae aperiam debitis doloribus necessitatibus placeat tempora voluptate totam exercitationem neque quae.
  </div>
</div>

【讨论】：

不，结构将与content div 将是绝对结构相同，而父级将relative。
那么你必须使用特定的高度或者需要为此编写som JS，因为绝对定位的元素与流分离

【解决方案2】：

没有 javascript 是不可能的，但是如果在 '.content' 中添加一个子元素，你可以得到它...

.box {
  text-align: center;
  
  width: 500px;
  margin: 0 auto;
  position:relative;
}

.content {
  border: 1px solid red;
  width: 100%;
  position:absolute;
  left:0;
  right:0;
}
.inner{
  margin: 0 auto;
  width: 50%;
}

<div class="box">
  <div class="content">
  <div class="inner">   
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda adipisci vel, dolore aspernatur iste iure blanditiis quam esse repudiandae aperiam debitis doloribus necessitatibus placeat tempora voluptate totam exercitationem neque quae.
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

绝对定位使元素脱离正常流动，因此它不能再改变其父元素的度量。试试这个，效果很好：

.box {
    text-align: center;
    border: 1px solid red;
    width: 500px;
    height:100%;
    margin: 0 auto;
}

.content {
    width: 50%;
    margin: 0 auto;
}

【讨论】：