1

Структура сайта следующая: есть общий блок (content), в котором расположены все элементы сайта и второй блок - footer, который должен прижиматься к низу сайта.

Блок Content имеет position: absolute для выравнивания по центру (горизонтально) - чтобы при уменьшении экрана он равномерно уходил за правую и левую его границы. Проблема в том, что при такой структуре блок Footer прижиматься к низу не хочет. Вот код:

HTML:

<div class = "a_wrapper">
    <div class = "a"></div>
</div>
<div class = "b">
</div>

CSS:

body {
    margin: 0px;
    padding: 0px;
}
.a_wrapper {
    width: 600px;
    left: 50%;
    margin-left: -300px;
    position: absolute;
    border: 1px dotted #000000;
}
.a {
    height:800px;
}
.b {
    width: 90%;
    height: 50px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    position: absolute;
    border: 1px solid #000000;
}

https://jsfiddle.net/0k979ud5/

nup
  • 1,833
  • Вы хотите чтоб футер был на всю ширину страницы или на ширину контента? – Алексей Шиманский Oct 31 '15 at 16:56
  • Footer должен быть по ширине страницы, а Content - фиксированной ширины, поэтому поместить Footer в Content не получится. – nup Oct 31 '15 at 16:58
  • контент нельзя центрировать абсолютным позиционированием!! Вы же не знаете ширину дисплея каждого юзера. Вам margiin: 0 auto ни о чем не говорит? – Алексей Шиманский Oct 31 '15 at 17:03
  • С центрированием контента, вроде, как раз проблем нет - выравнивается хорошо и на больших, и на маленьких экранах. Почему нельзя так центрировать? И если не так, то как тогда? – nup Oct 31 '15 at 17:08
  • Потому, что надо знать основы верстки. Посмотрите ссылку ...А спорить с вами только себе дороже. – Алексей Шиманский Oct 31 '15 at 19:11
  • Алексей Шиманский, значит, все-таки, скриншот привести не смогли? А я скриншот приводил. К чему спорить, если можно без лишних слов показать, как отображается у вас? Вопрос в том, почему вы не можете этого сделать. – nup Oct 31 '15 at 19:14
  • может так? - https://jsfiddle.net/soledar10/n988da6m/ – soledar10 Oct 31 '15 at 19:44
  • soledar10, нет, как раз нужно, чтобы нижний блок прокручивался вместе со страницей, а не был фиксированным. – nup Oct 31 '15 at 20:17
  • Возможный дубликат вопроса: Как всегда прижимать footer к низу экрана? –  Apr 03 '17 at 21:51

1 Answers1

1

Все то же самое, только position: relative в обоих случаях.

HTML:

<div class = "a_wrapper">
    <div class = "a"></div>
</div>
<div class = "b">
</div>

CSS:

body {
    margin: 0px;
    padding: 0px;
}
.a_wrapper {
    width: 600px;
    left: 50%;
    margin-left: -300px;
    position: relative;
    border: 1px dotted #000000;
}
.a {
    height:800px;
}
.b {
    width: 90%;
    height: 50px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    position: relative;
    border: 1px solid #000000;
}

https://jsfiddle.net/0k979ud5/4/

nup
  • 1,833