Question

我正在尝试基于这个旧的框架集构建一个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%;
}

我放了一个演示here。

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

任何想法都将不胜感激。谢谢。

Answer 1

我认为 this (fiddle) 您在寻找什么。

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

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

div似乎看起来并不精确，但这只是因为边界。如果你想要边框，那么你可以使用css box-sizing属性并将其设置为border-box。请参阅this page以供参考。基本上它使元素的大小包括默认情况下不包含的边框。

将frameset转换为css

1 个答案: