MnZn刚学1e-9s的html痛失顶部div（
  • 板块灌水区
  • 楼主lg10
  • 当前回复0
  • 已保存回复0
  • 发布时间2024/9/15 22:25
  • 上次更新2024/9/16 10:31:22
查看原帖
MnZn刚学1e-9s的html痛失顶部div（
642907
lg10楼主2024/9/15 22:25

写html的时候高度和超出了页面，导致最上方的div不见了，要滚轮缩小才能看见/ll/ll

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body{
            margin: 0;
            height: 100vh;
            background-color: rgb(235, 235, 235);
        }

        .flex{
            display: flex;
        }

        .column{
            flex-direction: column;
        }

        .white{
            background-color: white;
        }

        .margin{
            margin: 17px;
        }
        .marginR{
            margin-right: 17px;
        }
        .marginT{
            margin-top: 17px;
        }

        .width{
            width: 1076px;
        }
    </style>

</head>

<body class="flex">

    <!-- 侧边栏 -->
    <div class="white" style="width: 55px;"></div>

    <!-- 主区域 -->
    <div class="flex column" style="overflow: auto; flex: 1;" >

        <!-- 头部栏 -->
        <div class="white" style="height: 65px;"></div>

        <!-- 内容区 -->
        <div class="marginT flex column" style="margin-inline: auto;" >

            <!-- 上区 -->
            <div class="white width" style="height: 323px;"></div>

            <!-- 中区 -->
            <div class="marginT flex width" style="height: 188px;">

                <!-- 中左 -->
                <div class="marginR white" style="width: 250px;"></div>

                <!-- 中右 -->
                <div class="white" style="flex: 1;"></div>

            </div>

            <!-- 下区 -->
            <div class="marginT flex width" >

                <!-- 下左 -->
                <div class="marginR flex column" style="width: 804px;" >

                    <!-- 下左1 -->
                    <div class="white" style="height: 460px;" ></div>

                    <!-- 下左2 -->
                    <!-- <div class="marginT white" style="height: 800px;" ></div> -->

                </div>

                <!-- 下右 -->
                <div class="flex column" style="flex: 1;" >

                    <!-- 下右1 -->
                    <!-- <div class="white" style="height: 440px;" ></div> -->

                    <!-- 下右2 -->
                    <!-- <div class="marginT white" style="height: 365px;" ></div> -->

                </div>

            </div>

        </div>

    </div>
</body>

</html>

代码如上，81行左右的下左1div不注释就会爆掉网页长度导致顶部的头部栏消失

请问有无简单的解决办法/kel/kel

2024/9/15 22:25