2

我正在尝试基于这个旧框架集构建一个 CSS 页面布局：

<frameset cols="30%,70%">
    <frame>left</frame>
    <frameset rows="80%,20%">
        <frame>top</frame>
        <frame>bottom</frame>
    </frameset>
</frameset>

15 年前容易的事情现在似乎变得更加复杂了。我写了以下 HTML：

<div id="container">
    <div id="left">left</div>
    <div id="right">
        <div id="top">top</div>
        <div id="bottom">bottom</div>
    </div>
</div>

连同这个 CSS：

#container {
    border: 1px solid black;
    height: 300px;
}

#left {
    border: 1px solid red;
    float: left;
    width: 30%;
    height: 100%;
    overflow-y: scroll;
}

#right {
    border: 1px solid blue;
    margin-left: 30%;
    height: 100%;
}

#top {
    border: 1px solid red;
    height: 80%;
    overflow-y: scroll;
}

#bottom {
    border: 1px solid red;
    height: 20%;
}

我在这里放了一个演示。

到目前为止，我想要实现但失败的是：高度#bottom应该是某个像素高度，而不是百分比。当我这样做时，我搞砸了#top。我尝试使用绝对位置贴#bottom在底部，但后来我不知道如何#top使用其余的高度。

任何想法，将不胜感激。谢谢你。

4

1 回答 1

1

我认为这是您正在寻找的（小提琴） 。

#top {
    border: 1px solid red;
    height: 80%;
    overflow-y: scroll;
}

#bottom {
    bottom:0;
    border: 1px solid red;
    height: 20%;
}

div 看起来并不完全适合，但这只是因为边框。如果你想要边框，那么你可以使用 css box-sizing 属性并将其设置为边框框。请参阅此页面以供参考。基本上它使元素的大小包括默认情况下不包含的边框。

于 2013-05-22T20:51:36.170 回答