У меня есть элемент с фиксированной позицией, чтобы он плавал - как я могу предотвратить его плавание, когда он достигает нижнего колонтитула? - PullRequest
Новая
       1

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

2 голосов
/ 25 января 2012

Я хочу, чтобы моя плавающая боковая панель остановилась до того, как она дойдет до нижнего колонтитула - единственные решения, которые я нашел до сих пор, включают использование javascript, но я бы предпочел, чтобы был способ обойтись без него, если это возможно!

пример baisc: пример jsfiddle

Добавив приведенный ниже код, я могу остановить его, но затем он выталкивает все внутри моей боковой панели вверх по странице: 

bottom: 500px;

Ответы [ 2 ]

1 голос
/ 25 января 2012

Это не совсем то, что вы ищете, потому что я не могу придумать ни одного решения, в котором не используется JS

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

 .footer
        {
            width: 100%;
            border: 1px solid green;
            height: 500px;
            background-color: green;
            position:relative;
        }
0 голосов
/ 25 января 2012

Хорошо, ваша проблема в том, что вы на самом деле не понимаете ограничения контейнера HTML и поток.

Я бы потратил некоторое время на изучение учебников по HTML Flow и на точное понимание того, что происходит, так как это сделает вашу жизнь в будущем намного проще.

Еще одна хитрость заключается в размещении границ вокруг каждой содержащей структуры, такой как DIV, чтобы вы могли видеть, как каждый из ваших объектов вложен и т. Д ...

Проблема в том, что когда вы берете и добавляете bottom: 500px ;, вы абсолютно позиционируете нижний колонтитул, это автоматически удаляет его из обычного потока HTML. Я предполагаю, что ваша правая панель инструментов также не работает.

Таким образом, вместо того, чтобы использовать абсолютное позиционирование в нижней или правой панели инструментов, вам нужно будет использовать ограничивающий внешний контейнер, который инкапсулирует всю страницу, а затем размещать каждый элемент на странице в нужном вам порядке, используя float: left, float: right, чтобы получить ваше вертикальное положение. Пока ваш нижний колонтитул является последним в пределах вашего ограничивающего контейнера, и все элементы находятся в потоке, а ширина нижнего колонтитула установлена ​​на 100%, вы должны получить то поведение, которое ищете.

...