Полный с фоном с фиксированным с контентом - PullRequest
Новая
       20

Полный с фоном с фиксированным с контентом

0 голосов
/ 25 сентября 2018

У меня есть следующие два контейнера общей шириной 1400 пикселей.Проблема в моем коде в том, что фон не имеет ширины 100%, когда я хочу, чтобы два контейнера были 1400 пикселей

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

Я использую следующий код: 

.wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 50px;
}

#left-container {
  width: 50%;
  background: blue;
  float: left;
}

#right-container {
  width: 50%;
  background: green;
  float: left;
}
<div class="wrapper">

  <div id="left-container">

    <h2>Left container</h2>

  </div>

  <div id="right-container">

    <h2>Right container</h2>

  </div>

</div>

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

Это можно сделать разными способами.Самое простое решение, которое я могу придумать сейчас, это добавить контейнер и использовать линейный градиент: 

body {margin:0; padding:0;}
.container {
  background: linear-gradient(to left, blue 50%, green 50%);
}
.wrapper {
  border: 1px solid white;
  max-width: 1400px;
  margin: 0 auto;
  overflow: auto;
}

#left-container,
#right-container{
  box-sizing: border-box;
  width: 50%;
  float: left;
  padding-left: 50px;
}
<div class="container">
  <div class="wrapper">
    <div id="left-container">
      <h2>Left container</h2>
    </div>
    <div id="right-container">
      <h2>Right container</h2>
    </div>
  </div>  
</div>
0 голосов
/ 25 сентября 2018

Вы можете использовать псевдоэлемент в дополнение к фону для окраски, и у вас может быть некоторое переполнение: 

.wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding:0 50px;
}

#left-container {
  width: 50%;
  background: blue;
  float: left;
  position:relative;
}
#left-container:before {
  content:"";
  position:absolute;
  left:-100vw;
  right:100%;
  top:0;
  bottom:0;
  background:inherit;
}

#right-container {
  width: 50%;
  background: green;
  float: left;
  position:relative;
}
#right-container:before {
  content:"";
  position:absolute;
  right:-100vw;
  left:100%;
  top:0;
  bottom:0;
  background:inherit;
}
body {
 overflow:hidden;
}
<div class="wrapper">

  <div id="left-container">

    <h2>Left container</h2>

  </div>

  <div id="right-container">

    <h2>Right container</h2>

  </div>

</div>
...