jQuery 如何“清除”绝对定位的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1650539/
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
How to "clear" absolutely positioned elements
提问by Nate Wagar
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.
好的，我知道 1) 这可能无法单独使用 CSS，并且 2) 这真的不应该。
不幸的是，由于用户的某些要求，我需要找到一种方法使其成为可能。
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>
It's the divs within #wrapper that I need to clear. Assume they all have top&left positions.
我需要清除 #wrapper 中的 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.
这里的主要障碍是包装器中的 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.
我在想这可能用 jQuery 来实现......不知何故在该 div 中找到最低点并设置 div 高度以匹配。我正在努力这样做，但不知道从哪里开始。
Anyone have any ideas?
谁有想法？
Solution based on Torgamus' suggested javascript
基于 Torgamus 建议的 javascript 的解决方案
var maxHeight = 0;
$('#wrapper div').each(function () {
var tmpHeight = $(this).height() + $(this).position().top;
if (tmpHeight > maxHeight) {
maxHeight = tmpHeight;
$('#wrapper').height(maxHeight);
}
});
采纳答案by Pops
Based on your comment
根据您的评论
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.
以某种方式找到该 div 中的最低点并将 div 高度设置为匹配。我正在努力这样做，但不知道从哪里开始。
and your willingness to use jQuery, I whipped something up using JavaScript:
以及你愿意使用 jQuery，我用 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>
回答by Philippe Plantier
Actually, it IS possible with CSS, provided you use a technique similar to the "faux absolute positioning" technique which is explained there:
实际上，使用 CSS 是可能的，前提是您使用类似于此处解释的“虚假绝对定位”技术的技术：
http://www.alistapart.com/articles/fauxabsolutepositioning/
http://www.alistapart.com/articles/fauxabsolutepositioning/
In your case, you could do something like that:
在你的情况下，你可以做这样的事情：
<html>
<head>
</head>
<body>
<div><!--There's content in here --></div>
<div class="wrapper">
<div class="container">
<div class="stuff" style="margin-left:??px, margin-top:??px;">Stuff1</div>
</div>
<div class="container">
<div class="stuff" style="margin-left:??px, margin-top:??px;">Stuff2</div>
</div>
<div class="container">
<div class="stuff" style="margin-left:??px, margin-top:??px;">Stuff3</div>
</div>
<div class="container">
<div class="stuff" style="margin-left:??px, margin-top:??px;">Stuff4</div>
</div>
</div>
<div><!--There's content in here --></div>
</body>
</html>
Using margin-top and margin-left in the exact way you would use top and left in real absolute positioning.
以在实际绝对定位中使用 top 和 left 的确切方式使用 margin-top 和 margin-left 。
With the following CSS:
使用以下 CSS：
.wrapper {
overflow: hidden; /* To clear contents */
zoom: 1; /* To fix IE6 bugs with floats */
}
.container {
float: left;
margin-left: -100%;
position: relative;
left: 100%;
width: 100%;
}
.stuff {
float: left;
}
Sure, this would require adding extra containers around items. But you end up with something which behaves exactly like absolute positioned items would do, but clearable.
当然，这需要在项目周围添加额外的容器。但是你最终会得到一些行为与绝对定位项完全一样的东西，但可以清除。
回答by James Goodwin
Probably the easiest solution would be to use jQuery to get the distance from the top of the page to the #wrapperdiv and the height and then position your content <div>underneath this. Something like:
可能最简单的解决方案是使用 jQuery 获取从页面顶部到#wrapperdiv的距离和高度，然后将您的内容<div>放置在此下方。就像是：
$("#div").css('top', ($("#wrapper").offset().top + $("#wrapper").height()) + "px")
回答by Azeem.Butt
Why can't you position the container absolutely and then make its children relative?
为什么你不能绝对定位容器，然后让它的孩子相对？
回答by tahdhaze09
You shouldn't need to 'clear' an absolutely positioned element. How are the divs being positioned? Maybe you should just position the content div relative to the absolute div so it naturally flows after it.
您不需要“清除”绝对定位的元素。div 是如何定位的？也许您应该将内容 div 相对于绝对 div 定位，以便它自然地跟随它。
Maybe stick the content div inside the wrapper, make it relative and then put it after the other divs and it should 'clear'. Try it!
也许将内容 div 粘贴在包装器内，使其相对，然后将其放在其他 div 之后，它应该“清除”。尝试一下！
