CSS Sticky Footer - что, если у вас есть абсолютно расположенные элементы div на странице? - PullRequest
Новая
       6

CSS Sticky Footer - что, если у вас есть абсолютно расположенные элементы div на странице?

1 голос
/ 21 сентября 2009

Я использую это решение, которое работало для меня раньше:

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

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

<div id="wrap">
        <div id="container">

            <div id="myDiv">
               ...content...
               ... this div is absolutely positioned
            </div><!-- END aboutText -->

        </div><!-- END container -->
   <div class="push"></div>

</div><!-- END wrap -->
<div id="footer">
    ...footer content
</div>

На самом деле это работает сейчас. Не уверен почему - одна из тех загадок CSS. Однако вот еще один связанный с этим вопрос: как установить минимальную высоту браузера, чтобы при изменении размера браузера (уменьшении его размера) нижний колонтитул прекращал движение вверх и закрывал содержимое?

Редактировать - вот CSS. Нижний колонтитул прекрасно подходит для нижнего колонтитула, но он закрывает div содержимого на странице, если окно браузера маленькое. 

html, body {
    height: 100%;
}


#wrap{
    width:950px;
    margin: 0 auto -80px;
    min-height: 100%;
    height: auto !important;
    height: 100%;

}


.push {
     height: 80px;

 }

#footer{
     height: 80px;
     background-image:url(../images/img.jpg);

}

#container{
    position:relative;
}



#someDivWithinTheContainer{
    position:absolute;
    left:230px;
    top:300px;
}

Ответы [ 3 ]

0 голосов
/ 01 октября 2009

Вот что я использую для наклеивания нижнего колонтитула внизу. При использовании этого метода нижний колонтитул никогда не перекрывает содержимое, независимо от того, насколько маленьким становится окно. Если вы отредактируете его, убедитесь, что padding-bottom на div #body больше, чем высота div #footer - это то, что предотвращает перекрытие. У меня нет страниц с абсолютно позиционированным контентом, поэтому я не знаю, как он себя ведет; для плавающего содержимого, естественно, после него должен быть очищающий блок, иначе #body div сжимается.

CSS: 

html, body {margin:0;padding:0;height:100%;}
#container {min-height:100%;position:relative;}
#body {padding:10px;padding-bottom:2em;zoom:1;}
#footer {position:absolute;bottom:0;width:100%;height:1em;}

HTML: 

<body>
  <div id="container">
    <div id="body">
      (body contents)
    </div><!-- #body -->
    <div id="footer">
      <p>(footer text)</p>
    </div><!-- #footer -->
  </div><!-- #container -->
</body>

А затем, чтобы исправить IE6, я добавляю условный комментарий: 

<!--[if lt IE 7]>
<style type="text/css">
#container {height:100%;}
</style>
<![endif]-->

Также важно иметь объявление doctype, чтобы IE был в стандартном режиме, а не в режиме quirks.

0 голосов
/ 05 октября 2009

Исправлено положение элемента относительно рамки окна, игнорируя прокрутку, происходящую в теле страницы.

Люди иногда используют абсолют, потому что он похож, но отличается.

Одно из самых больших заблуждений об «абсолютном» заключается в том, что оно абсолютно позиционируется на странице (по крайней мере, на основе всех людей, с которыми я недавно беседовал). Это не. Абсолютный означает, что элемент позиционируется абсолютно внутри своего ближайшего, содержащего «позиционированный» элемент - любой элемент, который не имеет «position: static» (по умолчанию). Если вы ничего не располагаете, то это тело, как вы ожидаете. Как только вы начнете использовать позицию, вы измените то, к чему относится элемент.

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

0 голосов
/ 21 сентября 2009

Правильный ответ - фиксированная позиция, за исключением того, что IE6 не поддерживает это свойство.

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

Похожие темы

...