HTML/CSS div 结构

Question

我正在为客户制作一个由其他人设计的网站。该网站本身相对简单，但我似乎无法全神贯注于一件具体的事情。请看下面的截图:

http://cl.ly/image/0M090g150S28

如果我希望这两个绿色背景(顶部和底部)在调整大小时与内容(960px - margin 0 auto)保持对齐，但在扩展时也“永无止境”，我将如何制作我的 html/css 结构 window ，比方说，3000px？

永无止境的背景很容易。 固定到居中 div 的联系人的背景很容易。

但两者结合起来呢？请帮帮我，我已经为此烦恼了一段时间了。这可能 super 简单...？!

干杯!

Answer 1

如何在您的内容上使用两个巨大的伪元素，在它们上设置背景并在正文上使用 overflow: hidden。

DEMO

HTML:

<section class="main"></section>

CSS:

html, body, .main { height: 100%; }
body {
    margin: 0;
    overflow: hidden;
}
.main {
    width: 490px;
    margin: 0 auto;
    position: relative;
    background: rgba(192, 186, 176, .7);
}
.main:before, .main:after {
    width: 1500px;
    height: 1000px;
    position: absolute;
    content: '';
}
.main:before {
    right: 60%;
    top: 0;
    background: linear-gradient(-30deg, transparent 54%, teal 54%);
    background-repeat: no-repeat;
}
.main:after {
    left: 60%;
    bottom: 0;
    background: linear-gradient(-30deg, teal 46%, transparent 46%);
    background-repeat: no-repeat;
}

我使用了 CSS 渐变，它在 IE9 和 IE8 中不起作用，但您可以简单地使用图像。

编辑:我只是有另一个想法 - 你可以只使用边框而不是渐变，这样它就可以在 IE9 和 IE8 中工作。只需替换伪元素的 CSS:

DEMO

.main:before, .main:after {
    border: solid 500px teal;
    border-width: 500px 750px;
    position: absolute;
    content: '';
}
.main:before {
    right: 60%;
    top: 0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    background-repeat: no-repeat;
}
.main:after {
    left: 60%;
    bottom: 0;
    border-top-color: transparent;
    border-left-color: transparent;
    background-repeat: no-repeat;
}