html - 在 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 都将展开并最大化 wrapper 的宽度，或者将 body 的宽度填满。但内容或文本的宽度仍必须为 980px 并且是固定的。提前致谢。

Answer 1

检查这个Demo

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