Question

我只是坚持position，我使用position:relative作为父级而position:absolute作为孩子现在，父级div没有得到高度，我不想使用{{1} }或min-height。您可以在顶部看到红色height，即父级border。

fiddle code

border

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

请帮帮我？

由于

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

绝对定位会使元素超出正常流量，因此无法再更改其父级的度量。试试这个，它工作正常：

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

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

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

3 个答案: