代码之家 › 专栏 › 技术社区 › Sean Peterson

父div的位置绝对不考虑其子div的高度

absolute css html

Sean Peterson · 技术社区 · 7 年前

正如标题所示,我有一个绝对定位的父div,我需要其定义的高度随子元素的高度展开。css是否可以实现这一点?

这是我意思的密码笔 https://codepen.io/SeanPeterson/pen/paKqBg

.wrapper {
  background: blue;
  widht: 100%;
  height: 100%;
}

.parent1 {
  width: 100%;
  min-height: 500px;
  background: blue;
}

.parent2 {
  background: red;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 30%;
  height: 30%;
}

.child {
  background: green;
}

<div class="wrapper">
    <div class="parent1">

    </div>
    <div class="parent2">
        <div class="child">
            <p>Donec rutrum congue leo eget malesuada. Curabitur aliquet quam id dui posuere blandit. Curabitur non
                nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in,
                elementum id enim. Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus.
                Proin eget tortor risus.

                Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
                Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
                Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie
                malesuada.

                Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
                a. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et,
                porttitor at sem. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit
                amet dui. Vivamus suscipit tortor eget felis porttitor volutpat.Donec rutrum congue leo eget malesuada.
                Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis
                ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget
                malesuada. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus.

                Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
                Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
                Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie
                malesuada.

                Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
                a. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et,
                porttitor at sem. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit
                amet dui. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
        </div>
    </div>
</div>

即使div可见,浏览器中父级定义的高度也与其子级的高度不对应。这是我所指内容的截图。

我尝试这样做的原因是,我可以使用弹性框来匹配parent1和parent2 div的高度。但如果父母不重视孩子的身高,我就无法做到这一点。

感谢您的帮助!

3 回复 | 直到 7 年前

Paulie_D 7 年前

首先,确保您的绝对位置 parent2 div有一个定位 上下文 按设置 position:relative 到它的容器。

然后移除 bottom:0 从…起 家长2 它会根据内容调整其高度。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.wrapper {
  background: blue;
  height: 100%;
}

.parent1 {
  width: 100%;
  min-height: 500px;
  background: blue;
}

.parent2 {
  background: red;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  width: 30%;
}

.child {
  background: green;
}

<div class="wrapper">
  <div class="parent1">

  </div>
  <div class="parent2">
    <div class="child">
      <p>Donec rutrum congue leo eget malesuada. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget
        malesuada. Pellentesque in ipsum id orci porta dapibus.</p>
    </div>
  </div>
</div>

请注意,由于定位的原因,包装将不会采用 家长2 将div考虑在内。如果要平衡 parent1 和 家长2 您将需要一种替代技术,例如 Create a row of flexbox items with a max height defined by one child.

Rashed 7 年前

<div class="wrapper">
  <div class="parent1">

  </div>
  <div class="parent2">
    <div class="child">
      <p>Donec rutrum congue leo eget malesuada. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus.

Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada.

Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat.Donec rutrum congue leo eget malesuada. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus.

Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada.

Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
    </div>
  </div>
</div>

.wrapper{
    height: 400px;
    width: 100%;
    background: #ddd;
    position: relative;
}
.parent2{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.child{
    color: #333;
    padding: 10px;
    background: #f5f5f5;
    margin: 40px;
}

<div class="wrapper">
  <div class="parent1">

  </div>
  <div class="parent2">
    <div class="child">
        <p>Donec rutrum congue leo eget malesuada. Curabitur aliquet quam id dui posuere blandit. Curabit
    Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus susci.</p>
    </div>
  </div>
</div>

您应该给出位置:相对于子Div的父Div 你想把哪一个放在绝对位置,并取100%的高度此父Div高度。

.wrapper{
     position: relative;
}

顺便说一下,还可以定义父Div的固定高度,如

.wrapper{
    height: 600px;
    position: relative;
}

-1

UnpassableWizard 7 年前

清除浮动

希望对你有帮助。

.parent2{
  background: red;
  position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 30%;
    height: 30%;
  clear: both;
  content: '';
  display:table;
}