Full with background with fixed with content

问题

I've got the following two containers that should be 1400px width in total. The problem in my code is that the background isn't 100% width when I want the two containers to be 1400px.

How can I achieve this the best way? I hope you guys get my problem.

I am using the following code:

.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>

回答1:

You can use pseudo element in addition to background for the coloration and you can have some overflow:

.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>

回答2:

It can be done in many ways. The most simple solution I can think of now is to add a container and use a linear gradient:

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>

来源：https://stackoverflow.com/questions/52505735/full-with-background-with-fixed-with-content

标签

html

css

layout

grid

css-position