Html 位置：绝对和父高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13545947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position: absolute and parent height?
提问by Wordpressor
I have some containers and their children are only absolute / relatively positioned. How to set containers height so their children will be inside of them?
我有一些容器，它们的孩子只是绝对/相对定位。如何设置容器高度以便他们的孩子在其中？
Here's the code:
这是代码：
HTML
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
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;
}
Here's a jsfiddle. I want "bar" text to appear between 4 squares, not behind them.
这是一个jsfiddle。我希望“条”文本出现在 4 个方块之间，而不是在它们后面。
Any easy fixes?
有什么简单的修复方法吗？
Note that I don't know height of these children, and I can't set height: xxx for containers.
请注意，我不知道这些孩子的身高，并且我无法为容器设置 height: xxx 。
采纳答案by Tom Davies
If I understand what you're trying to do correctly, then I don't think this is possible with CSS while keeping the children absolutely positioned.
如果我理解您要正确执行的操作，那么我认为在保持孩子绝对定位的同时使用 CSS 是不可能的。
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
绝对定位的元素完全从文档流中移除，因此它们的尺寸不能改变其父级的尺寸。
If you reallyhad to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript by finding the height of the absolutely positioned children after they have rendered, and using that to set the height of the parent.
如果你真的必须在保持子元素为 的同时实现这种效果position: absolute，你可以使用 JavaScript 通过在渲染后找到绝对定位的子元素的高度来实现，并使用它来设置父元素的高度。
Alternatively, just use float: left/float:rightand margins to get the same positioning effect while keeping the children in the document flow, you can then use overflow: hiddenon the parent (or any other clearfix technique) to cause its height to expand to that of its children.
或者，只需使用float: left/float:right和边距来获得相同的定位效果，同时将子项保留在文档流中，然后您可以overflow: hidden在父项上使用（或任何其他清除技术）使其高度扩展到其子项的高度。
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;
}
回答by Az.Youness
Here is my workaround,
In your example you can add a third element
with "same styles"of .one & .two elements, but without the absolute position and with hidden visibility:
这是我的解决方法，
在您的示例中，您可以添加具有.one 和 .two 元素的“相同样式”的第三个元素，但没有绝对位置和隐藏可见性：
HTML
HTML
<article>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</article>
CSS
CSS
.three{
height: 30px;
z-index: -1;
visibility: hidden;
}
回答by user3517189
This is a late answer, but by looking at the source code, I noticed that when the video is fullscreen, the "mejs-container-fullscreen" class is added to the "mejs-container" element. It is thus possible to change the styling based on this class.
这是一个迟到的答案，但通过查看源代码，我注意到当视频全屏时，“mejs-container-fullscreen”类被添加到“mejs-container”元素中。因此，可以根据此类更改样式。
.mejs-container.mejs-container-fullscreen {
// This rule applies only to the container when in fullscreen
padding-top: 57%;
}
Also, if you wish to make your MediaElement video fluid using CSS, below is a great trick by Chris Coyier: http://css-tricks.com/rundown-of-handling-flexible-media/
此外，如果您希望使用 CSS 使 MediaElement 视频流畅，下面是 Chris Coyier 的一个绝妙技巧：http: //css-tricks.com/rundown-of-handling-flexible-media/
Just add this to your CSS:
只需将其添加到您的 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;
}
I hope it helps.
我希望它有帮助。
回答by Colin Dodgson
This kind of layout problem can be solved with flexbox now, avoiding the need to know heights or control layout with absolute positioning, or floats. OP's main question was how to get a parent to contain children of unknown height, and they wanted to do it within a certain layout. Setting height of the parent container to "fit-content" does this; using "display: flex" and "justify-content: space-between" produces the section/column layout I think the OP was trying to create.
这种布局问题现在可以用 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;
}
I modified the OP's fiddle: http://jsfiddle.net/taL4s9fj/
我修改了 OP 的小提琴：http: //jsfiddle.net/taL4s9fj/
css-tricks on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
flexbox 上的 css-tricks：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
回答by CESARVALLES
This is another late answer but i figured out a fairly simple way of placing the "bar" text in between the four squares. Here are the changes i made; In the bar section i wrapped the "bar" text within a center and div tags.
这是另一个迟到的答案，但我想出了一种相当简单的方法，将“条形”文本放在四个方块之间。这是我所做的更改；在栏部分，我将“栏”文本包裹在中心和 div 标签内。
<header><center><div class="bar">bar</div></center></header>
And in the CSS section i created a "bar" class which is used in the div tag above. After adding this the bar text was centered between the four colored blocks.
在 CSS 部分，我创建了一个“bar”类，用于上面的 div 标签。添加后，条形文本位于四个彩色块之间。
.bar{
position: relative;
}
