Делая противоположность CSS Sticky Footer - PullRequest
1 голос
/ 20 декабря 2010

Я пытаюсь сделать обратную ситуацию в StickyFooter: нижний колонтитул всегда должен быть виден (он будет перекрывать контент), но должен придерживаться контента страницы, когда высота браузера превышает контент (контент будет фиксированной высоты).

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

Я пробовал это только через CSS, аналогично тому, как это делает stickyfooter (используя max-height вместо min-height), но ...

Моя проблема: когда браузер меньше чемсодержание, нижний колонтитул изначально прилипает к основанию, но затем он не прилипает к основанию при прокрутке. Как показано здесь

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

Любая помощь, предложения, ссылки будут очень благодарны!Благодарю.

HTML, BODY { height: 100%; 
   font-family: helvetica, arial; 
   font-size: 8pt;
   }
#wrapper {
   margin: 0 auto;
   width: 800px;
   position:relative;
   height:100%;
   max-height: 516px;
   }
#content {
   width:800px;
   height:400px;
   position: absolute;
   background: #999;
   border: 4px solid #000;
   }
#footer {
   height: 100px;
   position: absolute;
   bottom: 0;
   width: 800px;
   background-color: yellow;
   border: 4px solid #f90;
   }

Ответы [ 2 ]

0 голосов
/ 06 июня 2012

обратный липкий нижний колонтитул? Да, черт возьми.

Все, что я сделал, это проанализировал сайт, который предоставил OP, и я придумал jsFiddle, демонстрирующий абсолютный минимум HTML / CSS, необходимый для достижения этого эффекта:

jsFiddle

Важно отметить, что для body необходимо применить свойство max-height. Будьте осторожны, потому что это может варьироваться в зависимости от того, сколько контента он содержит. Я скоро обновлю свой пример с помощью js, чтобы показать, как это можно сделать автоматически.

0 голосов
/ 20 декабря 2010

Вы должны добавить margin-bottom: 100px или больше к классу body (который является высотой нижнего колонтитула), когда нижний колонтитул установлен как фиксированный.

...