Заставить нижний колонтитул остаться на дне? - PullRequest
9 голосов
/ 07 октября 2011

У меня нет контейнеров, нет упаковщиков.

У меня просто такая раскладка ...

<body>

<div id="header">
</div>

<div id="left">
</div>

<div id="right">
</div>

<div class="clear"></div>

<div id="footer">
</div>

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

На данный момент я могу получить либо два изперечисленные выше способы работают, но я хочу, чтобы оба работали.

Вот CSS, который я настроил для этого.

html {
height: 100%;
}

body {
height: 100%;
position: relative;
}

#footer {
position: absolute;
bottom: 0;
}

Я знаю, что если я применю мин.-высота: 100%;к элементу HTML в документе CSS, который будет идти по мере поступления контента, но если у меня нет никакого контента, по сути, он не будет прилипать к нижней части экрана.Независимо от разрешения.

Я сталкивался с этой проблемой несколько раз и никогда не знал, как ее решить.Таким образом, некоторая помощь будет высоко ценится, наряду с некоторыми объяснениями.

Большое спасибо всем за вашу помощь!

Ответы [ 3 ]

8 голосов
/ 07 октября 2011

используйте этого помощника, это действительно хорошо объясненное и легкое для понимания руководство:

http://code.google.com/p/cleanstickyfooter/

Лучший липкий нижний колонтитул работает очень хорошо

Цитата с сайта (и я полностью согласен):

Разница

Google "липкий нижний колонтитул", я перечислил ниже, почему эта техника работает лучше, чем лучшие результаты этого поиска.

http://ryanfait.com/sticky-footer/ - эта техника похожа, но cleanStickyFooter делает это намного дальше. Техника, расположенная здесь не играет хорошо, если вы хотите, чтобы нижний колонтитул имел ширину 100%.

http://www.cssstickyfooter.com/ - Эта техника - одна из многих Я имею в виду, когда я говорю, что это инвазивно с CSS хакингом.

0 голосов
/ 07 октября 2011

Вы можете взглянуть на макет, указанный в этом Artice от RyanFait

Кросс-браузер, и всегда работает:)

0 голосов
/ 07 октября 2011

Хотите, чтобы нижний колонтитул был прикреплен к нижней части содержимого независимо от объема содержимого или к нижней части экрана независимо от объема содержимого?

Если первое, не беспокойтесь о позиционировании - отпустите поток страниц после содержимого.

Если второе, используйте положение: фиксированное

Возможно, вам нужно быть немного более ясным. Какие свитки? Заголовок? Оставил? Правильно? Footer? Являются ли левый и правый частью вашего общего контента? Почему ваше тело находится относительно? Почему у вас "высота: 100%"? для html?

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