0

这可能只用CSS吗？

我正在尝试将屏幕分成两个空间：

  1. 左侧的 div 始终与屏幕高度相同，将其宽度扩展到其内容并使用滚动条处理高度溢出。

  2. 一个 div，它占据剩余的屏幕宽度，包装其内容，并且其高度至少与屏幕高度一样高，而与内容无关。

这是我尽最大努力尝试的一些示例代码（小提琴）：

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 根据其内容扩展其宽度。

4

1 回答 1

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
}
于 2013-03-18T19:04:32.793 回答