How to "clear" absolutely positioned elements
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>
It's the divs within #wrapper that I need to clear. Assume they all have top&left positions.
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.
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.
Anyone have any ideas?
Solution based on Torgamus' suggested javascript
var maxHeight = 0;
$('#wrapper div').each(function () {
var tmpHeight = $(this).height() + $(this).position().top;
if (tmpHeight > maxHeight) {
maxHeight = tmpHeight;
$('#wrapper').height(maxHeight);
}
});
Actually, it IS possible with CSS, provided you use a technique similar to the "faux absolute positioning" technique which is explained there:
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.
With the following 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.
Probably the easiest solution would be to use jQuery to get the distance from the top of the page to the #wrapper div and the height and then position your content <div> underneath this. Something like:
$("#div").css('top', ($("#wrapper").offset().top + $("#wrapper").height()) + "px")
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.
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>
Why can't you position the container absolutely and then make its children relative?
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.
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!
加载中,请稍侯......
精彩评论