如何“清除”绝对定位的元素 [英] How to "clear" absolutely positioned elements
问题描述
好吧，我知道1）这可能是不可能的CSS单独和2）它真的不应该是可能的。
不幸的是，我需要找到一种方法，
Okay, I know that 1) this is probably not possible with CSS alone and that 2) it really shouldn't be possible.
Unfortunately, I need to find a way to make it possible due to some requirements from the user.
好，那么一些大大简化的标记：
Okay, so some greatly simplified markup:
<html>
<head>
</head>
<body>
<div><!--There's content in here --></div>
<div id="wrapper">
<div style="position: absolute;">Stuff1</div>
<div style="position: absolute;">Stuff2</div>
<div style="position: absolute;">Stuff3</div>
<div style="position: absolute;">Stuff4</div>
</div>
<div><!--There's content in here --></div>
</body>
</html>
这是我需要清除的#wrapper内的divs。假设它们都具有顶部和左侧位置。
It's the divs within #wrapper that I need to clear. Assume they all have top&left positions.
这里的主要障碍是封装内的div是可移动的。不仅如此，更多的内部div也可以添加或删除和定位在任何地方。
The major obstacle here is that the divs within wrapper are movable. Not only that, but more inner divs can also be added or removed and positioned anywhere.
我认为这可能是与jQuery ...不知何故找到最低点在div内并设置div高度匹配。我正在这样做，但不知道从哪里开始。
I was thinking that this may be possible with jQuery... Somehow finding the lowest point within that div and setting the div height to match. I'm working on doing it this way, but am not sure where to start.
任何人都有什么想法？
基于Torgamus的建议JavaScript的解决方案
var maxHeight = 0;
$('#wrapper div').each(function () {
var tmpHeight = $(this).height() + $(this).position().top;
if (tmpHeight > maxHeight) {
maxHeight = tmpHeight;
$('#wrapper').height(maxHeight);
}
});
推荐答案
根据您的意见
以某种方式找到该div中的最低点，并设置div高度匹配。我正在这样做，但不知道从哪里开始。
Somehow finding the lowest point within that div and setting the div height to match. I'm working on doing it this way, but am not sure where to start.
和你的意愿使用jQuery，我鞭打使用JavaScript的东西：
and your willingness to use jQuery, I whipped something up using JavaScript:
<html>
<head>
<title>Clearing abs positions</title>
<script>
function setHeight() {
var height1 = document.getElementById("abs1").style.top;
height1 = parseInt(height1.substring(0, height1.indexOf("px")));
height1 += document.getElementById("abs1").offsetHeight;
var height2 = document.getElementById("abs2").style.top;
height2 = parseInt(height2.substring(0, height2.indexOf("px")));
height2 += document.getElementById("abs2").offsetHeight;
var height3 = document.getElementById("abs3").style.top;
height3 = parseInt(height3.substring(0, height3.indexOf("px")));
height3 += document.getElementById("abs3").offsetHeight;
var height4 = document.getElementById("abs4").style.top;
height4 = parseInt(height4.substring(0, height4.indexOf("px")));
height4 += document.getElementById("abs4").offsetHeight;
var maxVal = Math.max(height1, height2);
maxVal = Math.max(maxVal, height3);
maxVal = Math.max(maxVal, height4);
var wrapper = document.getElementById("wrapper");
wrapper.style.height = maxVal + "px";
}
</script>
</head>
<body onload="setHeight()">
<div>
foo
<!--There's content in here -->
</div>
<div id="wrapper" style="border: 1px solid black;">
<div id="abs1" style="position: absolute; left: 100px; top: 150px; border: 1px solid red;">
Stuff1
</div>
<div id="abs2" style="position: absolute; left: 200px; top: 250px; border: 1px solid green;">
Stuff2
</div>
<div id="abs3" style="position: absolute; left: 300px; top: 100px; border: 1px solid blue;">
Stuff3
</div>
<div id="abs4" style="position: absolute; left: 400px; top: 450px; border: 1px solid orange;">
Stuff4
</div>
</div>
<div>
bar
<!--There's content in here -->
</div>
</body>
</html>
这篇关于如何“清除”绝对定位的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
