css - 如何使 div 缩放到浏览器宽度的 100%？

Question

<div id="sidebar">sidebar</div>
<div id="content">content</div>

侧边栏的宽度固定为 100px。如何使内容的宽度为浏览器宽度的 100%？

http://jsfiddle.net/chickendance/qQQTU/1/

Answer 1

你可以用简单的 CSS 做到这一点:

#sidebar {
    float: left;
    width: 100px;
}

#content {
    margin-left: 100px;
}

使用 wrapper div 更新:

HTML

<div id="wrapper">
    <p>wrapper</p>
    <div id="sidebar">sidebar</div>
    <div id="content">content</div>
    <p>wrapper</p>
</div>

CSS

* {
    /* reset */
    margin: 0;
    padding: 0;
}
html,
body {
    /* for demo purposes only */
    height: 100%;
}
#wrapper {
    /* for demo purposes only */
    background: rgba(200, 200, 200, 0.6);
    height: 100%;
}
#sidebar {
    float: left;
    width: 100px;

    /* for demo purposes only */
    background: rgba(200, 200, 200, 0.6);
    height: 50%;
}
#content {
    margin-left: 100px;

    /* for demo purposes only */
    background: rgba(200, 200, 200, 0.9);
    height: 50%;
}

工作示例:http://jsfiddle.net/kboucher/FK2tL/