Question

这只能用CSS吗？

我正在尝试将屏幕划分为两个空格：

左侧的div与屏幕的高度始终相同，将屏幕的宽度拉伸至内容并使用滚动条处理高度溢出。
占用剩余屏幕宽度的div，包裹其内容，其高度至少与屏幕高度一样高，与内容无关。

以下是我尝试过的最佳尝试示例代码（fiddle）：

HTML：

<body>
    <div id="items">
        <table>
            <tr>
                <td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
            </tr>
            <tr>
                <td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
            </tr>
            <tr>
                <td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
            </tr>
            <tr>
                <td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
            </tr>
            <tr>
                <td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
            </tr>
            <tr>
                <td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
            </tr>
            <tr>
                <td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
            </tr>
            <tr>
                <td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
            </tr>
        </table>
    </div>
    <div id="container">This should expand rest of page width.</div>
</body>

CSS：

body {
    margin: 0;
    padding: 0;
    position: absolute;
    height: 100%;
}
#items {
    height: 100%;
    overflow-y: scroll;
    border: solid 1px red;
    float: left;
}
#container {
    min-height: 100%;
    border: solid 1px blue;
    float: left;
}

这非常接近，但它失败了，因为第二个div（蓝色边框）无法扩展整个剩余的屏幕宽度。我不想设置％宽度或给定一个固定宽度，因为我希望第一个div根据其内容扩展其宽度。

Answer 1

这样做：

html, body {
    width: 100%;
    height: 100%;
}

#left {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}

#right {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll; // or not if you don't want it to
}

Scrollable Window Height Div，第二个Div占据屏幕空间的剩余部分

1 个答案: