Question

到目前为止我已经

了

<div id="wrapper">
    <div id="shoutbox">
        shoutbox
    </div>
    <div id="groups">
    testgroups
    </div>

    <div id="users">
        testusers
    </div>

</div>

我希望它占据整个屏幕。用户和组div总是150px，我希望shoutbox占用其余部分。我知道这可能很简单，但我不知道我会搜索什么来找到它。

Answer 1

鉴于您的HTML，以下CSS（以及视觉效果的一些着色）将是合适的。知道旧版本的IE不支持position: fixed;。

body, #wrapper {
    margin: 0;
    padding: 0;
}
#wrapper {
    position: relative;
}
#shoutbox {
    margin: 0 150px;
    background: #0f0;
    width: 100%;
}
#shoutbox, #users, #groups {
    position: fixed;
    overflow: scroll-y;
    top: 0px;
    bottom: 0px;
}
#users, #groups {
    width: 150px;
    color: #fff;
}
#users {
    left: 0px;
    background: #f00;
}
#groups {
    right: 0px;
    background: #00f;
}

在这里演示：http://jsfiddle.net/VtNk4/

Answer 2

#wrapper {
    box-sizing: border-box;
    display: table;
    width: 100%;
}

#wrapper > div {
    display: table-cell;
}

#groups, #users {
     width: 250px;
}

因为它没有明确的宽度，#shoutbox的宽度将随包装器一起弯曲。

这也有其他好处，列可以任何顺序出现，它仍然可以完美地工作。

这适用于Firefox 2 +，Safari 3 +，Opera 9+和IE8。

http://jsfiddle.net/chrisdarroch/HCMeN/

请注意，由于这会将表用于显示属性，因此要在“单元格”之间获取任何边距，您需要在border-spacing上使用#wrapper。

CSS 100％ - 300px？

2 个答案: