具有绝对/固定儿童的父容器上的自动高度
我试图设置一个自动高度包含2个子元素，定位固定和绝对respecitvely的股利。
我想我的父容器有一个自动的高度，但我知道这是很难的，因为子元素从他们的位置取出页面结构。
我已经尝试设置一个高度，我的父div的工作，但与我的布局是响应，当其缩小到移动时，高度保持不变，因为内容成堆叠，所以高度需要增加与其子。
不知道这是否有道理，我没有我的实际代码在我atm，但我做了一个小提琴试图解释…
http://jsfiddle.net/dPCky/
当父子div被定位为绝对/固定时，不能使用height:auto 。
你将需要使用JavaScript来实现这一点。
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);
http://jsfiddle.net/dPCky/32/ – 类似的效果使用float:left;
http://jsfiddle.net/dPCky/40/ – 更接近你想要的效果。
如果你愿意改变你的HTML，那么你可以做我以上所做的。
我从下面的教程中学习了定位，我将强烈推荐给想成为html / css中定位专家的人：
http://www.barelyfitz.com/screencast/html-training/css/positioning/
如果你愿意调整你的html，我一般会避免在可能的情况下使用javascript，以便可能有一个CSS或HTML级别的修复。
晚会有点晚，但是这可能有助于某人，因为这是我最近在没有JS的情况下解决了这个问题 – 如果孩子们在移动设备缩小时保持其宽高比。 我的例子涉及到使上下文响应jQuery.cycle幻灯片。 不确定这是否是你想要达到的上面，但它涉及绝对定位的儿童在一个容器中，在移动和显示尺寸大屏幕上100％的页面宽度。
您可以将父级的高度设置为使用视口宽度单位（vw），因此高度将根据设备的宽度进行调整。 现在的支持是足够广泛的，大多数移动设备将正确使用这些单位，错误和部分支持不涉及vw（而是，IE中的vmin和vmax）。 只有Opera Mini在黑暗中。
在这个例子中（jsfiddle有明确的高度设置），如果不知道孩子在响应点之间做了什么（假设jsfiddle具有明确的高度），那么让我们假设孩子的高度相对于设备宽度按比例缩小，这可以让你基于方面比。
.container{ height: 75vw; }
http://caniuse.com/#feat=viewport-units
如果你想要100vw的宽度，请注意caniuse的已知问题＃7，但是在这里我们玩的是高度！
享受适应任何设备和视口大小或旋转的容器的自动高度 。
它已经被testing了float，inline-block，absolute，margin和padding设置给孩子。
<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>
相关@ 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); }); };
如果你不想使用JavaScript，你可以参考这个答案https://stackoverflow.com/a/33788333/1272106 。
简短描述：复制一个元素并设置可见性以隐藏以展开父项。
更简单的方法是：
$(".container").height($(document).height());
