父div如果子div是绝对的，则不会获得高度 [英] Parent div Not getting height if child div is absolute

问题描述

我只是停留在位置，对于父母和位置，我使用了 position：relative ：绝对为孩子现在父div没有得到高度，我不想使用 min-height 或高度。你可以在顶部看到红色的 border ，它是父div border 。

小提琴代码

  .box {text-align：center;边框：1px纯红色;宽度：500px;保证金：0汽车; position：relative;}。content {width：50％;位置：绝对;左：0;正确：0; margin：0 auto;}  

 < div class =框> < div class =content> Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Assumenda adipisci vel，dolore aspernatur iste iure blanditiis quam esse repudiandae aperiam debitis doloribus necessitatibus placeat temporal voluptate totam exercitationem neque quae。 < / div>< / div>  

？

谢谢

解决方案

流动，所以它不能再改变其父母的措施。试试这个，它运行正常：

  .box {
 text-align：center; 
 border：1px纯红色; 
 width：500px; 
身高：100％; 
 margin：0 auto; 
} 
 
 .content {
宽度：50％; 
 margin：0 auto; 
} 
  

I just stuck in position, I used position:relative for parent and position:absolute for child now parent div did't get height and i don't want to use min-height or height. You can see the red border on top which is the parent 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>

Help me please ?

Thanks

解决方案

Absolute positioning takes an element out of normal flow, so it can not change the measures of its parent any more. Try this, it works fine:

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

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

这篇关于父div如果子div是绝对的，则不会获得高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！