Как сверстать черный фон как на картинке

235

22 марта 2018, 07:18

макет ограничен по ширине но нужно что бы справа черный фон растягивался на всю длину окна. Надпись в макете а фон выходит за рамки.Как это сделать?

Answer 1

Flexbox решение.

.container { 
  display: flex; 
  height: 180px; 
} 
 
.main-block { 
  width: 200px; /* фиксированная ширина */ 
  background: pink; 
  padding:10px; 
} 
 
.black-block { 
  flex-grow: 1; /* разрешаем растяжку */ 
  background: black; 
  color: white; 
  padding:10px; 
}

<div class="container"> 
  <div class="main-block">Блок фиксированной ширины</div> 
  <div class="black-block">Чёрный блок растягивающийся на всю ширину</div> 
</div>

Answer 2

Задай :after цвет фона тот который тебе необходим

<div class="box"></div>

.box {
 position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: #f00;
  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    bottom: 0;
    width: 100vw;
    height: 100%;
    background: #000;
  }
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Адаптивная вёрстка сайта

Подскажите как реализовать фоновое изображение, которое не будет изменять своих размеров при прокрутке Ctrl + колёсико

255

CSS

По какой причине flex-элементы не сжимаются?

По какой причине flex-элементы могут не сжиматься? Естьflex-container в котором 6 img, нужно что бы элементы не переходили на новый ряд и что бы размер...

247

CSS