1

对 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%;
}
4

3 回答 3

2

在不改变你迄今为止拥有的东西的情况下，应该这样做：

#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 扩展以填充剩余空间。

不过，我会提醒您不要为侧边栏使用百分比定义的宽度——随着窗口大小的变化，导航窗格的宽度也会发生变化。这通常不是期望的行为。

于 2013-11-08T02:47:45.717 回答
0

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/

于 2013-11-08T02:59:33.977 回答
0

这怎么样？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;
}
于 2013-11-08T02:59:49.647 回答