位置: 绝对高度和父母高度？

我有一些容器，他们的孩子只是绝对/相对的位置。如何设置容器的高度，使他们的孩子将在他们？

密码是这样的:

超文本标示语言

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

325325 次浏览
小开
最佳答案

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;
}
小开

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

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

此外，如果您希望使您的 MediaElement 视频流动使用 CSS，下面是一个伟大的技巧由克里斯 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;
}

希望能有所帮助。

小开

这是另一个后期的答案，但我想出了一个相当简单的方法，放置在四个正方形之间的“酒吧”文字。下面是我做的修改; 在 bar 部分，我将“ bar”文本包装在一个 center 和 div 标记中。

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

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

.bar{
position: relative;
}
小开

这是我的解决办法,
在示例中，可以添加第三个元素 与 “风格相同”的。一和。两个元素，但没有绝对位置和隐藏的可见性: < br >

超文本标示语言

<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*/
}
小开

这种布局问题现在可以用柔性箱来解决，避免了知道高度或用绝对定位或浮动来控制布局的需要。OP 的主要问题是如何让父节点包含未知高度的子节点，他们希望在一定的布局内完成。将父容器的高度设置为“ fit-content”就可以做到这一点; 使用“ display: flex”和“ justif-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;
}

我修改了《观察家报告》的小提琴: Http://jsfiddle.net/tal4s9fj/

Css 软件包技巧: Https://css-tricks.com/snippets/css/a-guide-to-flexbox/

小开

你可以通过网格来实现:

article {
display: grid;
}


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


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

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


提交答案