0

есть такая структура

    <header></header>
<div class="wrapper">привет мир</div>
<div class="selector">привет мир</div>
<div class="contentError">
  <div class="errorContainer">
    <p class="title">На данный момент сервис не работает в Ярославле</p>
      <p class="textError">
        Выберите другой город или <a href="#">подпишись на рассылку</a> и мы сообщим о начале работы в вашем городе.
      </p>
  </div>
</div>

и к нему css

 .contentError {
  background-color: red;
  padding: 24px 18px 24px 18px;
}

.errorContainer {
  background-color: #ffffff;
  padding: 23px;
}

.title {
    font-size: 20px;
  }

  .textError {
    font-size: 12px;
    line-height: 16px;
    margin-top: 17px;
  }

.buttonChangeCity {
  margin-top: 38px;
  cursor: pointer;
}

.city {
    color: #16B7E5;
  }

Как видите у contentError background стоит red, вопрос - как растянуть этот красный цвет до конца страницы?

пример на jsfiddle

3
  • На jquery Можно var c = $('.contentError');$('.contentError').css('padding-bottom', window.innerHeight - (c.offset().top + c + 24) + 'px');
    – br3t
    29 июл 2017 в 19:51
  • не, нужно без jq 29 июл 2017 в 20:43
  • @ГошкаТарасов 1) А сам элемент должен растягиваться до конца страницы? 2) Если нет, то если под ним будут другие элементы должны ли они перекрываться? 3) Что значит background: картика или сплошной цвет? Могу вам дать решения на каждый случай просто вопрос в том что вам нужно. 30 июл 2017 в 11:08

3 ответа 3

0

Например можно реализовать данным образом, через Flexbox:

/*Задаем свойства для родительского flexBox, и ставим высоту на всю страницу*/
body {
  display:flex;
  flex-direction: column;
  height:100vh;
  justify-content: flex-start;
  margin: 0;
}
.contentError {
  background-color: red;
  padding: 24px 18px 24px 18px;
  flex-grow: 1; /*Расширяемость блока на все свободное пространство родителя*/
}

.errorContainer {
  background-color: #ffffff;
  padding: 23px;
}

.title {
    font-size: 20px;
  }

  .textError {
    font-size: 12px;
    line-height: 16px;
    margin-top: 17px;
  }

.buttonChangeCity {
  margin-top: 38px;
  cursor: pointer;
}
.city {
    color: #16B7E5;
  }
<header></header>
<div class="wrapper">привет мир</div>
<div class="selector">привет мир</div>
<div class="contentError">
  <div class="errorContainer">
    <p class="title">На данный момент сервис не работает в Ярославле</p>
      <p class="textError">
        Выберите другой город или <a href="#">подпишись на рассылку</a> и мы сообщим о начале работы в вашем городе.
      </p>
  </div>
</div>

0

если под данным блоком ничего не планируется, то можно перекрыть псевдоэлементом :after

body {
  overflow:hidden;
}
.contentError {
  position:relative;
}
.contentError::after {
  position:absolute;
  right:0; bottom:-1000%; left:0;
  height: 1000%;
  background-color:red;
  content: '';
}


.contentError {
  background-color: red;
  padding: 24px 18px 24px 18px;
}
.errorContainer {
  background-color: #ffffff;
  padding: 23px;
}

.title {
    font-size: 20px;
  }

  .textError {
    font-size: 12px;
    line-height: 16px;
    margin-top: 17px;
  }

.buttonChangeCity {
  margin-top: 38px;
  cursor: pointer;
}

.city {
    color: #16B7E5;
  }
<header></header>
<div class="wrapper">привет мир</div>
<div class="selector">привет мир</div>
<div class="contentError">
  <div class="errorContainer">
    <p class="title">На данный момент сервис не работает в Ярославле</p>
      <p class="textError">
        Выберите другой город или <a href="#">подпишись на рассылку</a> и мы сообщим о начале работы в вашем городе.
      </p>
  </div>
</div>

0

Примените этот код и тогда не будет отступов:

*{
    margin: 0;
    padding: 0;
}

Ваш ответ

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

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