абсолютное позиционирование и css липкий колонтитул - PullRequest
Новая
       21

абсолютное позиционирование и css липкий колонтитул

3 голосов
/ 03 августа 2011

Вот моя проблема, я использую макет с липким нижним колонтитулом (с помощью метода cssstickyfooter.com).внутри моего контейнера div у меня есть содержимое div, в котором есть четыре других div.например, так: 

<div class="container">
    <div class="content">
        <div id="1"></div>
        <div id="2"></div>
        <div id="3"></div>
        <div id="4"></div>
    </div>
</div>
<div class="footer"></div>

Для того, чтобы липкий нижний колонтитул работал правильно, все div должны иметь position:relative;, потому что у div будет содержимое разной длины, и им нужноразмер соответственно.однако, где моя дилемма начинается с того, что мне нужно иметь div 1-4 с установленным position:absolute;, так что они будут складываться друг на друга, имея одинаковую (x, y) позицию.способ добиться того, что мне нужно?

Ответы [ 2 ]

3 голосов
/ 05 августа 2011

Я рекомендую Ryan Fait * липкий нижний колонтитул , работает очень хорошо! 

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  /* This line and the next line are not necessary unless you need IE6 support */
  height: 100%;
  margin: 0 auto -20px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 20px;
  /* .push must be the same height as .footer */
}
<body>
  <div class="wrapper">
    <p>Your website content here.</p>
    <div class="push"></div>
  </div>
  <div class="footer">
    <p>Copyright (c) 2008</p>
  </div>
</body>
2 голосов
/ 03 августа 2011

Обычно я просто использую следующее, чтобы "прикрепить" div к нижней части страницы (или контейнера): 

.footer {position:absolute;bottom:0;left:0;}

Как только вы установите абсолютное положение, оно станет независимым от внешних элементов div и ихположение / размеры.

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

Похожие темы

...