CSS - 位置：绝对；- 自动高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2822537/
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
CSS - position: absolute; - auto height
提问by superUntitled
I am having a problem with some div's
我有一些 div 的问题
The outer div has a min-height, but the inner divs are all varying heights. Because the inner divs are absolute positioned, they do not affect the outer divs height. Is there a way to make these inner divs affect the height of the outer div?
外部 div 具有最小高度，但内部 div 的高度各不相同。因为内部 div 是绝对定位的，所以它们不会影响外部 div 的高度。有没有办法让这些内部div影响外部div的高度？
The reason I am styling these divs with position:absolute is so that they all start at the top of the container div.
我使用 position:absolute 对这些 div 进行样式设置的原因是它们都从容器 div 的顶部开始。
采纳答案by Andrew
As far as I know, there's no way for absolutely positioned child elements to affect the height of their statically, or relatively positioned parent elements using only CSS. Either:
据我所知，绝对定位的子元素无法仅使用 CSS 来影响其静态或相对定位的父元素的高度。任何一个：
- Reorganize so that the child elements remain in the document flow
- Use JavaScript on load of the page to set the height of the parent to the height of the largest child
- 重新组织以便子元素保留在文档流中
- 在页面加载时使用 JavaScript 将父级的高度设置为最大子级的高度
This issue is common in fade-in/fade-out JavaScript slideshows, and from what I've seen either 1) the height of the parent container needs to be defined or 2) the parent container's height is set dynamically for each slide.
这个问题在淡入/淡出 JavaScript 幻灯片中很常见，从我看到的情况来看，1) 需要定义父容器的高度，或者 2) 为每张幻灯片动态设置父容器的高度。
回答by Simon
I recently had this problem with a fade in/out CSS transition slideshow, and ended up solving it by giving the first child element position: relative;and the others position: absolute; top:0; left: 0;which ensures that the containers height is the same as the height of first element. Since my CSS transition slideshow uses the opacity property the container dimensions never changes during the course of the slideshow.
我最近在淡入/淡出 CSS 过渡幻灯片放映时遇到了这个问题，最终通过提供第一个子元素position: relative;和其他position: absolute; top:0; left: 0;确保容器高度与第一个元素的高度相同的子元素来解决它。由于我的 CSS 过渡幻灯片使用了 opacity 属性，因此在幻灯片放映过程中容器尺寸永远不会改变。
Alas, since I also needed to supply a javascript fallback for older browsers I had to set the container height for these browsers anyway (because of jQuerys fadeIn/fadeOut actually setting display: none;I would guess).
唉，因为我还需要为旧浏览器提供 javascript 回退，所以无论如何我都必须为这些浏览器设置容器高度（因为display: none;我猜是 jQuery 的淡入/淡出实际上是设置）。
回答by Samuel Willems
Here is a long overdue cross-browser solution to your problem. No more static width, no more emhack.
这是针对您的问题的早该跨浏览器的解决方案。不再是静态的width，不再是emhack。
<style>
/* clearfix */
.container:after {
content: '';
display: table;
clear: left;
}
.page {
float: left; /* display side-by-side */
width: 100%; /* be as wide as parent */
margin-right: -100%; /* take up no width */
}
</style>
<div class="container">
<div class="page"></div>
<div class="page"></div>
</div>
After searching for a solution to this problem for so long, I am baffled to see how simple it is. Granted, the .pageelements are not absolutely positioned. However, all the same goals can be achieved through this method, with almost no pain or sacrifice.
在寻找这个问题的解决方案这么久之后，我不知道它是多么简单。当然，.page元素不是绝对定位的。然而，通过这种方法可以实现所有相同的目标，几乎没有痛苦或牺牲。
Here's a demo: https://jsfiddle.net/eqe2muhv/
这是一个演示：https: //jsfiddle.net/eqe2muhv/
This also works for inline-blocks, of course. Though you might need to set the font-sizeor letter-spacingof the container to 0. I would also recommend using vertical-align: topon the .page, to simulate a regular block element.
当然，这也适用于内联块。尽管您可能需要将容器的font-size或设置letter-spacing为0。我还建议vertical-align: top在.page, 上使用来模拟常规块元素。
Here's a demo: https://jsfiddle.net/dzouxurs/8/
这是一个演示：https: //jsfiddle.net/dzouxurs/8/
回答by Artem Solovev
i've done this task without any JS. Only, by CSS:
我已经完成了这项任务，没有任何JS. 仅通过 CSS：
.frame {
max-height: calc(100vh - 283px); // 283px gives me some space at the botoom of the frame
}
回答by Майкл Миллер
Maybe u can try max-height: calc(100% - 50%);it will work if the content that should be in the middle of the screen/div is super short/small.
max-height: calc(100% - 50%);如果应该在屏幕/div 中间的内容超短/小，也许你可以尝试它会起作用。
position:absolute;
top:0;
bottom:0;
margin:auto;
width:auto;
height:auto
max-height: calc(100% - 50%);
...etc...
回答by kmiyashiro
You can simply float the divs if you want them to be on the same horizontal plane.
如果您希望它们在同一水平面上，您可以简单地浮动 div。
回答by dscher
I think you should position them relatively and just change "vertical-align" to "top" in the interior divs. Then you won't have the issue of messing with abs divs.
我认为您应该相对定位它们，只需将内部 div 中的“垂直对齐”更改为“顶部”。那么你就不会有搞乱 abs div 的问题了。
回答by Sawny
Test display: inline-blockon the element that need auto height.
测试display: inline-block需要自动高度的元素。
