Question

我正在尝试将页面分为4部分，但大小不同。使用以下代码，我将水平分成两部分。

但是当我想在绿色区域插入第一个垂直线时，只显示一部分...

这是我的代码：

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

{{1}}

有人可以帮助我吗？

Answer 1

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    position: relative;

}

#top,
#bottom,
#right,
#left {
    position: fixed;
    overflow: auto;
}

#top {
    top: 0;
    left: 0;
    background-color: palevioletred;
    height: 20%;
    width: 100%;
}

#bottom {
    left: 0;
    bottom: 0;
    background-color: green;
    height: 20%;
    width: 80%;
}

#right {
    right: 0;
    background-color: blue;
    width: 20%;
    top: 20%;
    height: 80%;
}

#left {
    left: 0;
    width: 80%;
    top: 20%;
    height: 60%;
    background: #fff;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <div id="top">top</div>
  <div id="left">Left</div>
  <div id="right">Right</div>
  <div id="bottom">bottom</div>
</body>
</html>

如何创建具有4个部分的页面布局？

1 个答案: