位置：绝对和父高度？

Posted 2023-03-05

【中文标题】位置：绝对和父高度？

【英文标题】：Position: absolute and parent height?

【发布时间】：2012-11-12 19:32:18

【问题描述】：

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

代码如下：

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。我希望“条形”文本出现在 4 个方格之间，而不是在它们后面。

http://jsfiddle.net/Ht9Qy/

有什么简单的修复方法吗？

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

【问题讨论】：

Make absolute positioned div expand parent div height的可能重复

【参考方案1】：

这是我的解决方法， 在您的示例中，您可以添加第三个元素 具有 .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*/

【参考方案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;

【参考方案3】：

你可以用网格做到这一点：

article 
    display: grid;


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


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

【讨论】：

你真是个天才。谢谢！这似乎是在不设置固定值的情况下保持绝对元素高度的唯一方法。太棒了。

【参考方案4】：

这种布局问题现在可以用 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/

【参考方案5】：

这是另一个较晚的答案，但我想出了一个相当简单的方法，将“条”文本放置在四个方块之间。这是我所做的更改； 在 bar 部分，我将“bar”文本包裹在 center 和 div 标签内。

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

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

.bar
    position: relative;

【讨论】：

不要使用

...从 html4（公元 1997 年）开始

【参考方案6】：

如果我理解您要正确执行的操作，那么我认为在保持孩子绝对定位的同时使用 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;

【讨论】：

对于任何在这里绊倒的人，试图弄清楚为什么你的 margin-left: -16px & overflow: hidden 技巧不起作用。我没有考虑到我也有右填充，所以我需要margin-right：-16px。我还使用了 width: 100vw 作为容器，不知道是否需要。

【参考方案7】：

这是一个迟到的答案，但是通过查看源代码，我注意到当视频全屏时，“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;

希望对你有帮助。