Проблема позиционирования нижнего колонтитула CSS - PullRequest
Новая
       59

Проблема позиционирования нижнего колонтитула CSS

1 голос
/ 01 сентября 2011

Вот предварительный просмотр того, что я имею до сих пор:

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

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

То, что я сейчас делаю, это просто позиционирую его относительно top: -120px; и затем, как вы можете видеть, это дает мне дополнительный пробел, от которого я хочу избавиться. 

footer { height:185px; background:url(../images/footer_bg.png) repeat-x; position:relative; z-index: 0; top:-115px; width:100%; }

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

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

Спасибо!

Ответы [ 3 ]

1 голос
/ 01 сентября 2011

Липкие нижние колонтитулы могут быть сложными, а добавление перекрывающего фона может быть еще более хитрым. Возможно, вы захотите создать Липкий нижний колонтитул и применить фоновое изображение к фону тела или контейнера, повторяя x и расположив его снизу.

Можете ли вы создать jsfiddle , и я могу показать вам технику, которую я имею в виду.

1 голос
/ 01 сентября 2011

мы также используем липкий нижний колонтитул - вот основы: 

<div id="container">
  <div id="header">Header</div>
  <div id="nav">
     <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
    </ul>
    </div>
<div id="content">Content Here.</div>
<div class="clearfooter"></div>
</div>
<div id="footer">Footer Here.</div>

Обратите внимание на колонтитул перед концом контейнера.Тогда с CSS вам нужно что-то вроде этого: 

html, body {    
   height: 100%; 
}

#container {
   min-height: 100%;
   margin-bottom: -330px;
   position: relative;
}

.clearfooter {
   height: 330px;
   clear: both;
}

#footer {
   height: 330px;
   position: relative;
}

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

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

#container {
   height: 100%;
}

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

0 голосов
/ 01 сентября 2011

Когда вы компенсируете что-то с помощью position: relative, элемент по-прежнему «резервирует» пространство, которое он занял бы в противном случае - в вашем случае, нижнюю область, где вы получаете пробел.Установите margin-bottom: -115px в нижнем колонтитуле, чтобы запретить это.

...