位置：绝对高度和父高度？

Question

我有一些容器，它们的子容器只是绝对/相对定位的。如何设置容器的高度以便他们的孩子在里面？

这是代码：

HTML

<section id="foo">
  <header>Foo</header>

  <article>
    <div class="one"></div>
    <div class="two"></div>
  </article>
</section>    
    
<div style="clear:both">Clear won't do.</div>
<!-- I want to have a gap between sections here -->
    
<section id="bar">
  <header>bar</header>
  
  <article>
    <div class="one"></div>

    <div></div>

    <div class="two"></div>
  </article>
</section>  

CSS

article {
  position: relative;
}
    
.one {
  position: absolute;
  top: 10px;
  left: 10px;
  background: red;
  width: 30px;
  height: 30px;
}
    
.two {
  position: absolute;
  top: 10px;
  right: 10px;
  background: blue;
  width: 30px;
  height: 30px;
}

这是一个jsfiddle。我希望“bar”文本出现在 4 个方块之间，而不是它们后面。

http://jsfiddle.net/Ht9Qy/

有什么简单的解决方法吗？

注意，我不知道这些孩子的高度，也无法为容器设置 height: xxx。

Answer 1

2022 年更新。这个答案已经有近10年历史了。当它写成的时候，我们还没有像 Flex 或 Grid 这样的布局技术（那是黑暗、黑客/有趣的时代）。

值得庆幸的是，情况已经有了很大改善。 Jöcker 的回答 向您展示了如何使用 Grid 实现这种布局。如果您可以忍受不支持旧版浏览器，那就这样做吧！

---

原答案

如果我正确地理解了你想要做的事情，那么我认为在保持孩子们绝对定位的同时使用CSS这是不可能的。

绝对定位的元素完全从文档流中删除，因此它们的尺寸不能改变其父元素的尺寸。

如果您真的必须在保持子级为

position: absolute

的同时实现这种效果，您可以使用JavaScript来实现这一点，方法是在渲染后找到绝对定位的子级的高度，并使用它来设置父级的高度.

或者，只需使用

float: left

/

float:right

和边距即可获得相同的定位效果，同时将子级保持在文档流中，然后您可以在父级上使用

overflow: hidden

（或任何其他clearfix 技术）来调整其高度扩展到其子级。

article {
    position: relative;
    overflow: hidden;
}

.one {
    position: relative;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: relative;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

Answer 2

这是我的解决方法，
在您的示例中，您可以添加第三个元素 .one 和 .two 元素具有“相同样式”，但没有绝对位置且具有隐藏可见性：

HTML

<article>
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
</article>

CSS

.three{
    height: 30px;
    z-index: -1;
    visibility: hidden;
    width:0!important; /* if you got unnecessary horizontal scroll*/
}

Answer 3

您可以使用网格来做到这一点：

article {
    display: grid;
}

.one {
    grid-area: 1 / 1 / 2 / 2;
}

.two {
    grid-area: 1 / 1 / 2 / 2;
}

Answer 4

这是一个较晚的答案，但通过查看源代码，我注意到当视频全屏时，“mejs-container-fullscreen”类被添加到“mejs-container”元素中。因此可以根据此类更改样式。

.mejs-container.mejs-container-fullscreen {
    // This rule applies only to the container when in fullscreen
    padding-top: 57%;
}

此外，如果您希望使用 CSS 使 MediaElement 视频流畅，下面是 Chris Coyier 的一个很棒的技巧：http://css-tricks.com/rundown-of-handling-flexible-media/

只需将其添加到您的 CSS 中即可：

.mejs-container {
    width: 100% !important;
    height: auto !important;
    padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
    width: 100% !important;
    height: 100% !important;
}
.mejs-mediaelement video {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
}

希望有帮助。

Answer 5

现在可以使用 Flexbox 来解决这种布局问题，避免需要知道高度或使用绝对定位或浮动来控制布局。 OP 的主要问题是如何让父级包含未知高度的子级，他们希望在特定布局内做到这一点。将父容器的高度设置为“fit-content”即可实现此目的；使用“display：flex”和“justify-content：space- Between”产生我认为OP试图创建的部分/列布局。

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="main one"></div>
        <div class="main two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>

<section id="bar">
    <header>bar</header>
    <article>
        <div class="main one"></div><div></div>
        <div class="main two"></div>
    </article>
</section> 

* { text-align: center; }
article {
    height: fit-content ;
    display: flex;
    justify-content: space-between;
    background: whitesmoke;
}
article div { 
    background: yellow;     
    margin:20px;
    width: 30px;
    height: 30px;
    }

.one {
    background: red;
}

.two {
    background: blue;
}

我修改了OP的小提琴： http://jsfiddle.net/taL4s9fj/

flexbox 上的 css 技巧： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 6

article {
    position: relative;
   
}

//clear the float

article::after{
  content: '';
  clear: both;
  
}

.one {
    position: relative;
    float:left
    margin-top: 10px;
    margin-left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: relative;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

Answer 7

设置元素的样式为position:absolute 顶部：0，底部：0

Answer 8

这是另一个迟来的答案，但我找到了一种相当简单的方法，将“条形”文本放置在四个方块之间。这是我所做的更改； 在栏部分，我将“栏”文本包裹在中心和 div 标签内。

<header><center><div class="bar">bar</div></center></header>

在 CSS 部分中，我创建了一个“bar”类，用于上面的 div 标签中。添加此后，条形文本位于四个彩色块之间的中心。

.bar{
    position: relative;
}