这个应该怎么做呢 求助大佬

 

思路:一个大div里面嵌套三个小div，分别在顶部，中部，底部显示。中部div里面嵌套两个div，分别分为左边和右边。左边div进一步分为左右，右边div分为上下。

可以参考一下我的在线考试系统UI

https://edu.csdn.net/course/detail/10321

https://edu.csdn.net/course/detail/6960

div+iframe，或者 frameset嵌套

1、div+iframe，自行通过样式和js控制各iframe的高度，div默认是单行，不是满屏

2、frameset嵌套，通过frame设置，自适应高度或定高，frameset默认是满屏

div+flex就行http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%;
            height: 100vh;
        }

        .head {
            background: red;
            width: 100%;
            height: 10%;
        }

        .center {
            width: 100%;
            height: 80%;
            display: flex;
        }

        .left {
            width: 50%;
            height: 100%;
            display: flex;
        }

        .left>div {
            width: 50%;
            height: 100%;
        }

        .left>.lson1 {
            background: gold;
        }

        .left>.lson2 {
            background: green;
        }

        .right {
            width: 50%;
            height: 100%;
        }

        .right>.rson1 {
            width: 100%;
            height: 50%;
            background: gray;
        }

        .right>.rson2 {
            width: 100%;
            height: 50%;
            background: greenyellow;
        }
        .footer{
            background: red;
            width: 100%;
            height: 10%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="head"></div>
        <div class="center">
            <div class="left">
                <div class="lson1"></div>
                <div class="lson2"></div>
            </div>
            <div class="right">
                <div class="rson1"></div>
                <div class="rson2"></div>
            </div>
        </div>
        <div class="footer"></div>
    </div>
</body>

</html>

 

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632