Question

对HTML和CSS不太熟悉，所以请耐心等待。

我有一个代表整个页面的大<div>，我使用两个子元素（左侧显示导航菜单，右侧显示内容）将其分为30％ - 70％比例的两部分。这很好。

现在我需要将左边分为两部分。底部应根据其内容的大小自行调整大小。顶部应占用剩余空间。我已尝试从其他一些SO问题中提出建议，但未能实现我的需要。

注意：如果顶部div的内容增长，则应显示滚动条，而不是顶部div占用底部div。

现有左右列的CSS位于：

.leftCol
{
    position: absolute;
    overflow: auto;
    right: 70%;
    left: 0;
    top: 0;
    bottom: 30px;
    background: #aabbcc;
}

.rightCol
{
    position:absolute;
    overflow: auto;
    left: 30%;
    right: 0;
    top: 0;
    bottom: 30px;   
    width: 70%;
    height: 100%;
}

Answer 1

如果不改变你到目前为止所做的事情，我们应该这样做：

#top-left {
    background-color: blue;
    height: 100%;
}

#bottom-left {
    background-color: green;
    height: auto;
    position: absolute;
    bottom: 0px;
}

#left-col{
    position: absolute;
    overflow: auto;
    right: 70%;
    left: 0;
    top: 0;
    bottom: 30px;
    background: #aabbcc; 
    height: 100%; }

#right-col {
    position:absolute;
    overflow: auto;
    left: 30%;
    right: 0;
    top: 0;
    bottom: 30px;   
    width: 70%;
    height: 100%; }

这是一个jsfiddle。尝试删除一些虚拟文本以查看左上角的div展开以填充剩余空间。

我会警告不要在侧边栏中使用百分比定义的宽度 - 随着窗口大小的改变，导航窗格的宽度会发生变化。这通常不是理想的行为。

Answer 2

您可以在左侧divs

中再添加两个div

CSS：

    body {
        width: 100%;
        margin: 0 auto;
    }

    .leftCol {
        position: absolute;
        overflow: auto;
        right: 70%;
        left: 0;
        top: 0;
        bottom: 30px;
        background: #aabbcc;
    }

        .leftCol .leftTop {
            background: #ff6a00;
            height: 100%;
        }

        .leftCol .leftBottom {
            background: #b6ff00;
        }

    .rightCol {
        position: absolute;
        overflow: auto;
        left: 30%;
        right: 0;
        top: 0;
        bottom: 30px;
        width: 70%;
        height: 100%;
    }

HTML：

<div class="leftCol">
    <div class="leftTop">Top Left</div>
    <div class="leftBottom">Bottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom Left</div>
</div>
<div class="rightCol">Right Column
</div>

<强> http://jsfiddle.net/T4N66/

Answer 3

这是怎么回事？ http://jsfiddle.net/Z4K7J/

.right {
    border:1px solid orange;
    position:absolute;
    right:0;
    top:0;
    width:70%;
    height:100%;
}

.left {
    border:1px solid orange;
    position:absolute;
    left:0;
    top:0;
    width:25%;
    height:100%;
    display:table;
}

.top {
    display:table-row;
    height:100%;
}

.top .inner {
    background-color:red;
    height:100%;
    overflow-y:auto;
}

.bottom {
    display:table-row;
}

将<div>分成两部分</div>

3 个答案: