How to “clear” absolutely positioned elements

后端未结

关注

 5  1836

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 d

相关标签:

5条回答

梦如初夏

2020-12-31 18:18
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")
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

逝去的感伤

2020-12-31 18:22

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>

0 讨论(0)

独厮守ぢ

2020-12-31 18:39

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.

0 讨论(0)

野的像风

2020-12-31 18:41

Why can't you position the container absolutely and then make its children relative?

0 讨论(0)
发布评论:

提交评论
- 加载中...
臣服心动

2020-12-31 18:45

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!

0 讨论(0)
发布评论:

提交评论
- 加载中...