具有绝对/固定儿童的父容器上的自动高度

我试图设置一个自动高度包含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/blowsie/dPCky/1/

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());