Абсолютно расположенный нижний колонтитул в контейнере с относительным расположением - PullRequest
Новая
       37

Абсолютно расположенный нижний колонтитул в контейнере с относительным расположением

1 голос
/ 03 февраля 2012

Я знаю, что версии этого вопроса задавались много, много раз.Я знаю, потому что, кажется, я прочитал почти все из них за последние 4 часа.

Нигде я не видел ответа на этот вопрос.

Проблема, с которой я столкнулся, заключается в следующем: у меня естьШаблон, хотя в остальном очень функциональный, позволяет очень ограниченный контроль над кодом.Я могу, однако, играть с CSS.Теперь есть несколько элементов, которые используются рядом с верхним колонтитулом, который мне нужен внизу, чуть ниже нижнего колонтитула.

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

Это работает очень хорошо с: 

.referencepositionwrapper {
    position: relative;
}
.absolutepositioncontainer {
    position: absolute;
    bottom: -144px;
}

, но только когда элементы, которые должны быть опущены, имеют высоту около 136 пикселей.

Вот руб.Содержимое, которое мне нужно переместить под нижний колонтитул, является динамическим.Иногда это 136 пикселей в высоту, иногда 36 пикселей.Иногда его высота составляет 300 пикселей.

В настоящее время элемент с абсолютным позиционированием ссылается на нижнюю часть оболочки и контейнера, поэтому при изменении высоты контейнера все становится шатко.

Есть ли способ использовать днообертки и верхней части контейнера, чтобы между двумя элементами не было большого мертвого пространства или перекрытия?

Большое спасибо, любая помощь будет принята с благодарностью.

Контекст в соответствии с запросом.

В приведенном мною примере для абсолютного класса: 

bottom:-144px;

создает расстояние 144px между bottom относительного и bottom of absolute

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

Таким образом, когда нижний колонтитул содержит больше данных, скажем, достаточно, чтобы высоту абсолюта составляла 300 пикселей, возникает 156-кратное перекрытие.Когда данных меньше, скажем, достаточно, чтобы сделать абсолютные 36 пикселей в высоту, «мертвое пространство» составляет 108 пикселей.

Я хочу найти способ определить расстояние, скажем, 36 пикселей, между bottom относительного и top абсолютного.

Таким образом, независимо от того, сколько дополнительных данных находится в абсолютном, между относительным и относительным остается только 36pxАбсолют.

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

1 Ответ

0 голосов
/ 03 февраля 2012

Попробуйте это: 

.referencepositionwrapper {
    position: relative;
}

.absolutepositioncontainer {
    position: absolute;
    top: 100%;
    margin-top: 36px; /* or your custom distance between the two */
}
...