Html 具有绝对/固定子级的父容器上的自动高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9061520/
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
Auto height on parent container with Absolute/Fixed Children
提问by Liam
Im trying to set an automatic height a div that contains 2 child elements, positioned fixed and absolutely respecitvely.
我试图为一个包含 2 个子元素的 div 设置一个自动高度，这些子元素定位固定且绝对分别。
I want my parent container to have an auto height but I know this is hard as the child elements are taken out of the page structure with their positions.
我希望我的父容器具有自动高度，但我知道这很难，因为子元素与其位置一起从页面结构中取出。
I have tried setting a height to my parent div that works, but with my layout being responsive, when its scaled down to mobile, the height remains the same where as the content within becomes stacked and so the height needs to increase with its children.
我已经尝试为我的父 div 设置一个有效的高度，但是我的布局是响应式的，当它缩小到移动设备时，高度保持不变，因为里面的内容被堆叠起来，所以高度需要随着它的孩子而增加。
Not sure if this makes sense, I dont have my actual code on me atm but ive made a fiddle trying to explain...
不确定这是否有意义，我的 atm 上没有我的实际代码，但我做了一个小提琴试图解释......
回答by Blowsie
The parent div can not use height:autowhen its children are positioned absolute / fixed.
height:auto当其子项被定位为绝对/固定时，父 div 不能使用。
You would need to use JavaScript to achieve this.
您需要使用 JavaScript 来实现这一点。
An example in jQuery:
jQuery 中的一个例子：
var biggestHeight = 0;
// Loop through elements children to find & set the biggest height
$(".container *").each(function(){
// If this elements height is bigger than the biggestHeight
if ($(this).height() > biggestHeight ) {
// Set the biggestHeight to this Height
biggestHeight = $(this).height();
}
});
// Set the container height
$(".container").height(biggestHeight);
Working example http://jsfiddle.net/blowsie/dPCky/1/
回答by Anicho
http://jsfiddle.net/dPCky/32/- A similar effect using float:left;
http://jsfiddle.net/dPCky/32/- 使用类似的效果float:left;
http://jsfiddle.net/dPCky/40/- An even closer result to your desired effect.
http://jsfiddle.net/dPCky/40/- 更接近您想要的效果的结果。
If you're willing to change your html, then you could do what I have done above.
如果你愿意改变你的html，那么你可以做我上面所做的。
I learned positioning from the following tutorials which I would highly recommend to anyone who wants to become a positioning pro in html/css:
我从以下教程中学习了定位，我强烈推荐给任何想成为 html/css 定位专家的人：
http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://www.barelyfitz.com/screencast/html-training/css/positioning/
I would generally avoid using javascript where possible when doing something that could potentially have a css or html level fix, if you're willing to adjust your html.
如果你愿意调整你的 html，我通常会在做一些可能有 css 或 html 级别修复的事情时尽可能避免使用 javascript。
回答by Ricky Jiao
If you don't want to use JavaScript, you could refer this answer https://stackoverflow.com/a/33788333/1272106.
如果你不想使用 JavaScript，你可以参考这个答案https://stackoverflow.com/a/33788333/1272106。
Short description: duplicate one element and set visibility to hide to expand the parent.
简短说明：复制一个元素并将可见性设置为隐藏以展开父元素。
回答by Shale
A little late to the party, but this may help someone as this is how I resolved the issue recently without JS - IF the children maintain their aspect ratio as they shrink for mobile devices. My example relates to making a jQuery.cycle slideshow responsive, for context. Unsure if this is what you're trying to achieve above, but it involved absolutely positioned children within a container which has 100% page width on mobile and explicit dimensions on larger screens.
聚会有点晚了，但这可能对某人有所帮助，因为这就是我最近在没有 JS 的情况下解决问题的方法 - 如果孩子们在移动设备缩小时保持纵横比。我的示例涉及为上下文制作响应式 jQuery.cycle 幻灯片。不确定这是否是您在上面尝试实现的目标，但它涉及在移动设备上具有 100% 页面宽度且在较大屏幕上具有显式尺寸的容器内绝对定位的子项。
You can set the parent's height to use viewport width units (vw), so the height adapts relative to the device's width. Support is broad enough these days that most mobile devices will use these units correctly, bugs and partial support don't relate to vw (but rather, to vmin and vmax in IE). Only Opera Mini is in the dark.
您可以将父级的高度设置为使用视口宽度单位 (vw)，因此高度会相对于设备的宽度进行调整。如今，支持范围很广，大多数移动设备都可以正确使用这些单位，错误和部分支持与 vw 无关（而是与 IE 中的 vmin 和 vmax 相关）。只有 Opera Mini 处于黑暗之中。
Without knowing what the children are doing between responsive points in this example (the jsfiddle has explicit heights set), let's assume the height of the children scales down predictably relative to the device width, which allows you to fairly accurately assume the height based on aspect ratio.
不知道孩子在这个例子中的响应点之间正在做什么（jsfiddle 设置了明确的高度），让我们假设孩子的高度相对于设备宽度按比例缩小，这使您可以相当准确地假设高度基于方面比率。
.container{ height: 75vw; }
.container{ height: 75vw; }
http://caniuse.com/#feat=viewport-units
http://caniuse.com/#feat=viewport-units
Do note known issue #7 on caniuse if you're going for 100vw as a width measure, but here we're playing with height!
如果您要使用 100vw 作为宽度度量，请注意 caniuse 上的已知问题 #7，但在这里我们正在玩高度！
回答by Foobar
The right way... simple. No Javascript.
正确的方法……简单。没有Javascript。
<div class="container">
<div class="faq-cards">
<div class="faq-cards__card">Im A Card</div>
<div class="faq-cards__card">Im A Card</div>
<div class="faq-cards__card">Im A Card</div>
<div class="faq-cards__card">Im A Card</div>
<div class="faq-cards__card">Im A Card</div>
<div class="faq-cards__card">Im A Card</div>
<div class="faq-cards__card">Im A Card</div>
</div>
</div>
.container {
height: auto;
width: 1280px;
margin: auto;
background: #CCC;
}
.faq-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
bottom: 40px;
height: auto;
}
.faq-cards__card {
position: relative;
margin: 10px;
padding: 10px;
width: 225px;
height: 100px;
background: beige;
text-align: center;
}
回答by Heroselohim
Enjoy this auto heightfor container that adapts to any device and viewport resize or rotation.
享受适用于任何设备和视口调整大小或旋转的容器的这种自动高度。
It has been tested with float, inline-block, absolute, margins and paddingset to the childs.
它已经通过为孩子设置的浮动、内联块、绝对、边距和填充进行了测试。
<div class="autoheight" style="background: blue">
<div style="position: absolute; width: 33.3%; background: red">
Only
<div style="background: green">
First level elements are measured as expected
</div>
</div>
<div style="float:left; width: 33.3%; background: red">
One Two Three Four Five Six Seven Eight Night Ten
</div>
<div style="float:left; width: 33.3%; background: red">
One Two Three Four Five Six
</div>
</div>
<script>
function processAutoheight()
{
var maxHeight = 0;
// This will check first level children ONLY as intended.
$(".autoheight > *").each(function(){
height = $(this).outerHeight(true); // outerHeight will add padding and margin to height total
if (height > maxHeight ) {
maxHeight = height;
}
});
$(".autoheight").height(maxHeight);
}
// Recalculate under any condition that the viewport dimension has changed
$(document).ready(function() {
$(window).resize(function() { processAutoheight(); });
// BOTH were required to work on any device "document" and "window".
// I don't know if newer jQuery versions fixed this issue for any device.
$(document).resize(function() { processAutoheight(); });
// First processing when document is ready
processAutoheight();
});
</script>
回答by djmj
Related to @Blowsie's answer:
与@Blowsie 的回答相关：
/**
* Sets the height of a container to its maximum height of its children. This
* method is required in case
*
* @param selector jQuery selector
*/
function setHeightByChildrenHeight(selector)
{
$(selector).each(function()
{
var height = 0;
$(this).children("*").each(function()
{
height = Math.max(height, $(this).height());
});
$(this).height(height);
});
};
回答by Victory Hymn
An easier way is:
更简单的方法是：
$(".container").height($(document).height());
