Вопрос об абсолютной позиции, 100% высоты и делении ниже этого элемента

Question

У меня есть такой код:

<div id="container">
    <div id="has-100-percent-height">
        This div is positioned absolutely and display is none. 
        Overflow auto, too. There are many of these divs within "container"
    </div>
</div>

<div id="the-div-below">
     stuff
</div>

Когда пользователь нажимает на определенную ссылку, div "100 процентов высоты" должен скользить вниз, используя. То, что происходит, это то, что он действительно скользит вниз, но не опускает внизу. Вы можете видеть, что контент просто отображается над «the-div-under» и после того, как он скользит вниз, он быстро исчезает.

Кто-нибудь знает, что может происходить? Это в Firefox 4. Я не тестировал другие браузеры

Спасибо за помощь!

Answer 1

CSS для вашего HTML уже установлен в камне?Как уже говорили другие, позиционированный элемент абсолютно находится вне нормального потока, поэтому не может влиять на положение любого другого элемента.Если вы можете удалить position:absolute из #inner, тогда решение очень простое (и просто обычное повторное отображение в браузере) - см. это демо .

Однако, если вам нужно сохранить абсолютное позиционирование, вам придется нажимать #below вручную, т. Е. JavaScript - см. это демо .

Надеюсь, это поможет.

Answer 2

Вы можете добавить верхнюю часть отступа / поля к #the-div-below, который равен элементу высоты 100%.

Answer 3

Причина, по которой «the-div-under» не отталкивается, заключается в том, что абсолютно позиционированные объекты не влияют на макет чего-либо еще на странице.В этом весь смысл абсолютного позиционирования.

Итак, чтобы все работало так, как вам нужно, вам нужно расположить ваш «100-процентный рост» div как статически, так и относительно.

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