1

Есть страница структуры:

<body>
 <div class="wrapper">
 <header></header>
 <div class="class-1"></div>
 <div class="class-2"></div>
 <div class="class-3"></div>
 <footer></footer>
 </div>
</body>

Для того,чтобы фиксировать футер всегда внизу страницы я добавил ему стили

position:absolute 
bottom:0;

Также создал медиазпросы:

@media screen and (min-width: 1200px) {
        .wrapper {
            margin-bottom: 125px;
        }
    }
@media screen and (max-width: 1200px) {
        .wrapper {
            margin-bottom: 210px;
        }
    }

Все вроде бы неплохо, однако в некоторых случаях <div class="class-3"></div> заползает чутка под футер. Это происходит, потому что я задал ему position: absolute. В сети видел,что это решается тем,что обертке содержимого страницы присваивается отступ. Однако в моем случае контейнеры с содержимым не имеют обертку и идут друг за другом. И крайний контейнер с содержимым может меняться в зависимости от страницы. Как в таком случае лучше поступить и подогнять содержимое к футеру? PS поменять разметку не могу

2 ответа 2

4

В Вашем примере footer должен быть всегда фиксированной высоты, что не есть хорошо... Воспользуйтесь технологией FlexBox и будет вам счастье...

Код - https://jsfiddle.net/kd8qyp5z/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#wrapper {
  width: 80%;
  height: 220px;
  margin: auto;
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

#wrapper>.row {
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#header {
  background-color: #D6D6D6;
}

#content {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 66%;
  flex-basis: 60%;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  background-color: #00FF00;
}

#side-left {
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  background-color: #FFFF00;
  padding-right: 10px;
}

#side-right {
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
  order: 3;
  background-color: #FFFF00;
  padding-left: 10px;
}

#footer {
  background-color: #D6D6D6;
}
<div id="wrapper">
  <header id="header">header</header>
  <div class="row">
    <div id="content">content</div>
    <aside id="side-left">side-left</aside>
    <aside id="side-right">side-right</aside>
  </div>
  <footer id="footer">footer</footer>
</div>

Вот все как просто)))

6
  • просто,но я выше писал,что ищу вариант без изменения разметки. в вашем примеры добавлен контейнер-обертка row, в нем дивы с новыми id...так в моем случае вряд ил получится(
    – Iga
    20 апр 2017 в 13:55
  • @Iga , это был всего лишь пример... А почему вам именно такая разметка нужна? что в ней особенного?
    – Ruslan
    20 апр 2017 в 14:01
  • в ней нет ничего особенного. просто проект до меня писали,ужо почти все сделано,разметка генерируется из шаблонов,лезть туда и перекурочивать ее мне не очнеь хочется,поэтому решил посмотреть может есть какие-то варианты для того,чтобы сделать то,что я хочу с этой разметкой
    – Iga
    20 апр 2017 в 14:10
  • по сути там правок не больше чем на 30-60 минут...
    – Ruslan
    20 апр 2017 в 14:19
  • согласен полностью,но там такой проект...в общем иногда не так просто что-то поменять в чужих костылях. я попробую поменять разметку,ибо в сети ничего толкового не нашел.спасибо)
    – Iga
    20 апр 2017 в 14:27
1

Вот ещё вариант, всё красиво и грамотно как в ответе @Руслана, только без изменения вёрстки и при помощи Grid Layout

body {
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template-areas: 
    'header header header'
    'class1 class2 class3'
    'footer footer footer';
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 3fr 1fr;
  width: 100%;
  min-height: 100vh;
}

header {
  grid-area: header;
  background: #D6D6D6;
}

.class-1 {
  grid-area: class1;
  background: #FFFF00;
}

.class-2 {
  grid-area: class2;
  background: #00FF00;
}

.class-3 {
  grid-area: class3;
  background: #FFFF00;
}

footer {
  grid-area: footer;
  background: #D6D6D6;
}
<body>
  <div class="wrapper">
    <header>header</header>
    <div class="class-1">left column</div>
    <div class="class-2">content</div>
    <div class="class-3">right column</div>
    <footer>footer</footer>
  </div>
</body>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.