在div包装器中扩展DIV - 固定布局

Question

我想知道如何在div包装器中扩展每个DIV。我的div包装是固定的，宽度为980px。

我的HTML在这里：

    <div id="wrapper" >

        <div id="header" >
            <strong>HEADER</strong>
        </div>

        <nav>
            <strong>Navigation</strong>
        </nav>

        <div id="content" >
            <div class="sidebar" >
                <p>sidebar</p>
            </div>
            <div class="main-content" >
                <p>content goes here.....</p>
            </div>
        </div>

        <footer>
            <strong>copyright etc....</strong>
        </footer>

    </div>

这是FIDDLE

我想要实现的是每个拥有background-color的DIV都会扩展并最大化包装的宽度或类似填充身体宽度的东西。但是内容或文本的宽度仍然必须980px并且是固定的。提前谢谢。

Answer 1

选中此Demo

.div-inner {
width: 500px;
margin: 0 auto;
}