Прижатый подвал

mayse · November 23, 2011

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

Edited November 23, 2011 by mayse

Great Rash · November 23, 2011

«прижать футер к низу» в Google.

mayse · November 23, 2011

«прижать футер к низу» в Google.

Форум - служит для дискуссий. Давайте из примеров которые я нашел, выберем более работоспособный вариант.

Вариант №1

html


<html>
  <body>
    <div id="content">
    content
    </div>
    <div id="footer">
    footer
    </div>
  </body>
</html>

css



html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
#content {
  position: relative;
  min-height: 100%;
}
* html #content {
  height: 100%;
}
#footer {
  position: relative;
  margin-top: -2.5em;
  height: 2.5em;
}

Вариант №2

html


<html>
  <body>
    <div id="header">
    header
    </div>
    <div id="content">
    content
    </div>
    <div id="footer">
    footer
    </div>
  </body>
</html>

css


html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
body {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  position: relative;
}
#header {
  height: 3em;
  width: 100%;
}
#content {
  padding-bottom: 2.5em;
}
#footer {
  height: 2.5em;
  width: 100%;
  position: absolute;
  bottom: 0;
}

Svatov · November 23, 2011

Прижать футер

Great Rash · November 23, 2011

Давайте из примеров которые я нашел, выберем более работоспособный вариант.

Что значит "более работоспособный"? Либо работает, либо нет. Либо вас устраивает, либо нет. Случаи разные бывают.

Ну вот мне, например, нравится вариант №2, вам от этого легче?

mayse · November 23, 2011

Давайте из примеров которые я нашел, выберем более работоспособный вариант.
Что значит "более работоспособный"? Либо работает, либо нет. Либо вас устраивает, либо нет. Случаи разные бывают.
Ну вот мне, например, нравится вариант №2, вам от этого легче?

Все отлично, спасибо!

Sign In

Прижатый подвал

Question

mayse

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

mayse

Link to comment

Share on other sites

Svatov

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

mayse

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information