jquery – 如何“清除”绝对定位的元素

好吧,我知道1)这可能不仅仅用CSS而且2)它真的不可能.
不幸的是,由于用户的一些要求,我需要找到一种方法使其成为可能.

好的,所以一些大大简化的标记：

<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中的div.假设他们都有顶部和左侧位置.

这里的主要障碍是包装内的div是可移动的.不仅如此,还可以在任何地方添加或删除更多内部div.

我认为这可能是jQuery的可能……以某种方式找到该div中的最低点并设置div高度以匹配.我正在努力这样做,但不知道从哪里开始.

有人有主意吗？

解决方案基于Torgamus建议的javascript

var maxHeight = 0;
$('#wrapper div').each(function () {
    var tmpHeight = $(this).height() + $(this).position().top;

    if (tmpHeight > maxHeight) {
        maxHeight = tmpHeight;
        $('#wrapper').height(maxHeight);
    }
});

解决方法

根据你的评论

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掀起了一些东西：

<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>

jquery – 如何“清除”绝对定位的元素

解决方法

相关文章