Как «очистить» абсолютно позиционированные элементы - PullRequest
7 голосов
/ 30 октября 2009

Хорошо, я знаю, что 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>

Мне нужно очистить div внутри #wrapper. Предположим, что все они имеют верхнюю и левую позиции.

Основным препятствием здесь является то, что элементы 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);
    }
});

Ответы [ 5 ]

13 голосов
/ 19 сентября 2011

На самом деле, это возможно с CSS, при условии, что вы используете технику, похожую на технику "искусственного абсолютного позиционирования", которая там объясняется:

http://www.alistapart.com/articles/fauxabsolutepositioning/

В вашем случае вы могли бы сделать что-то подобное:

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

Используя margin-top и margin-left точно так же, как вы использовали бы top и left в реальном абсолютном позиционировании.

Со следующим 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;
}

Конечно, для этого потребуется добавить дополнительные контейнеры вокруг предметов. Но в конечном итоге вы получаете нечто, что ведет себя точно так же, как и предметы с абсолютным позиционированием, но его можно очистить.

2 голосов
/ 30 октября 2009

Вероятно, самым простым решением было бы использовать jQuery, чтобы получить расстояние от верхней части страницы до #wrapper div и высоту, а затем расположить ваш контент <div> под этим. Что-то вроде:

$("#div").css('top', ($("#wrapper").offset().top + $("#wrapper").height()) + "px")
1 голос
/ 30 октября 2009

На основании вашего комментария

Каким-то образом найти самую низкую точку в этом div и установить высоту div в соответствии. Я работаю над этим, но не знаю, с чего начать.

и ваша готовность использовать 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>
1 голос
/ 30 октября 2009

Почему вы не можете позиционировать контейнер абсолютно, а затем сделать его дочерние относительно?

0 голосов
/ 30 октября 2009

Вам не нужно «очищать» абсолютно позиционированный элемент. Как позиционируются div'ы? Может быть, вам следует просто расположить div содержимого относительно абсолютного div, чтобы он естественным образом шел после него.

Возможно, поместите содержимое div в оболочку, сделайте его относительным, а затем поместите его после других div, и оно должно «очиститься». Попробуй!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...