父div如果子div是绝对的，则不会获得高度

本文介绍了父div如果子div是绝对的，则不会获得高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我只是停留在位置，对于父母和位置，我使用了 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; }