Как сохранить содержимое в контейнере, но расширить его ширину фона в CSS? - PullRequest
Новая
       17

Как сохранить содержимое в контейнере, но расширить его ширину фона в CSS?

0 голосов
/ 20 ноября 2018

Я пытаюсь разработать дизайн, который выглядит следующим образом:

Design image

В дизайне над красными линиями расположены стороны контейнера.Я сохраняю содержимое раздела внутри контейнера div следующим образом: 

.container {
width: 1200px;
margin: 0 auto;
}

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

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

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

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

body{
  background-color: #cccccc;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

div.containerA {
  position: relative; 
  top: 100px;
  width: 100%;
  background-color: lightblue;
}

div.containerB {
  width: 800px;
  margin: 0 auto;
  display: flex;
}

div.contentA {
  width: 50%;
  flex: 0 0 50%;
}

div.contentB {
  position: relative;
  right: -100px;
  width: 50%;
  flex: 1;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="containerA">
  <div class="containerB">
      <div class="contentA">
      <h1>Title 1</h1>
     <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
      </div>

       <div class="contentB">
       <h1>Title 2</h1>
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
      </div>
  <div>    
</div>


</body>
</html>
0 голосов
/ 20 ноября 2018

Одним из способов достижения того, что вы ищете, является использование псевдоэлемента для имитации фона.Ключ в том, чтобы расположить псевдоэлемент и дать ему правильный размер.

Вот пример: 

* {
  box-sizing: border-box;
}
.container {
  max-width: 400px;
  padding: 20px 0;
  margin: 0 auto;
}
.container:after {
  content:'';
  display: table;
  height: 0;
  clear: both;
}
.w50 {
  float: left;
  width: 50%;
  position: relative;
  z-index: 2;
}
.w50:first-child:before {
    content:'';
    background: #ddd;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50vw;
    z-index: -1;
}
<div class="container">
  <div class="w50">
    <h2>First child</h2>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
    </p>
        <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
    </p>
        <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
    </p>
        <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
    </p>
    
  </div>
  <div class="w50">
    <h2>Second child</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet tempora illum eligendi, praesentium saepe error itaque reiciendis. Placeat sint quasi ea obcaecati soluta accusamus. Reiciendis incidunt praesentium quidem commodi expedita?</p>
  </div>
</div>

Вот как этого добиться:

  • Добавьте position: relative; к элементу, которому требуется фон.
  • Добавить элемент peusdo :before.
  • Добавить position: absolute;, width: 50vh; top: 0; right: 0; bottom: 0; к этому псевдоэлементу.
...