Question

这不是解释我需要的东西，而是图像：

http://i.imgur.com/2SLEPzX.png

从屏幕左侧到容器中的220px，背景需要是一种颜色，屏幕的其余部分（从220px到屏幕的右侧）需要是不同的颜色。 / p>

我该怎么做？

这是我迄今为止所拥有的，没有背景颜色伸展到两侧：

HTML：

<div class="container">
    <div class="sidebar">
        1
    </div>
    <div class="content">
        2
    </div>
</div>

CSS：

.container {
    width: 970px;
    background: rgba(255, 0, 0, 0.1);
    margin: 0 auto;
}

.sidebar {
    width: 220px;
    background: lightgrey;
    float: left;
}

.content {
    width: 750px;
}

Answer 1

在正文上只有一个div元素或背景图片，因为你不能只在一个元素上有“分裂”背景。

我建议的方法是div元素方法，因为这在语义上是正确的。

CSS：

body,
html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
}

nav {
    background: #ccc;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 220px;
}

HTML：

<nav></nav>

Answer 2

这是我的解决方案。如果屏幕尺寸低于970px，它甚至会有所反应。

body{
  margin:0;
  overflow:hidden;
}

aside{
  width:calc(50% - 265px); /* (970px/2)-220px=265px */
  height:100vh;
  background-color:lightgrey;
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
}

article{
  width:calc(50% + 265px);
  height:100vh;
  background-color:white;
  position:absolute;
  top:0;
  right:0;
  overflow:hidden;
}

nav{
  width:100%;
  max-width:220px;
  height:100%;
  position:absolute;
  top:0;
  right:0;
  background-color:rgba(255,0,0,.3);
}

.content{
  width:100%;
  max-width:750px;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background-color:rgba(255,0,0,.3);
}

<aside>
  <nav></nav>
</aside>
<article>
  <div class="content"></div>
</article>

Answer 3

可能有更好的方法可以做到这一点但是，看看这是否适合你。 jsfiddle

＆＃13;

    html, body {
        height: 100%;
        margin: 0;
        text-align: center;
    }
    .backgroundLeft, .container, .sidebar {
        border: 1px solid black;	
    }

    .backgroundLeft {
        float: left;
        width: 50%;
        height: 100%;
        background-color: gray;
    }
    .container {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 970px;
        height: 100%;
        background-color: white;
    }
    .sidebar {
        width: 220px;
        height: 100%;
        float: left;
        background-color: gray;
    }

＆＃13;

<html>
<body>
    <div class="container">970
        <div class="sidebar">220</div>
    </div>
    <div class="backgroundLeft"></div>
</body>
</html>

＆＃13;

两种不同颜色在容器内分开，伸展到屏幕边缘？

3 个答案: