系统后台默认界面，布局

最新推荐文章于 2024-04-26 15:21:52 发布

麦文豪（victor）

最新推荐文章于 2024-04-26 15:21:52 发布

阅读量414

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_43954090/article/details/105720178

版权

重中之重：设置html和body为100%，缺一不可

<style>
        html,body{
            height: 100%;
        }
    </style>

详细代码

<html>

<head>
    <title>我的第一个 HTML 页面</title>
    <style>
        html,body{
            height: 100%;
        }
    </style>
</head>

<body style="margin:0;padding:0">
    <div class="container" style="display: flex;width: 100%;height: 100%;background-color: red;overflow: hidden;" >
        <div  class="left" style="background-color: yellow;width: 300px;height: 100%;" >
            <div class="headerleft" style="width: 100%;height: 50px;background-color:aqua;">左边导航的顶部</div>
            <div class="menu" style="overflow-y: scroll;height: 100%;">
                <div style="width: 100%;height: 200px;border: 1px solid black;">菜单一</div>
                <div style="width: 100%;height: 200px;border: 1px solid black;">菜单一</div>
                <div style="width: 100%;height: 200px;border: 1px solid black;">菜单一</div>
                <div style="width: 100%;height: 200px;border: 1px solid black;">菜单一</div>
                <div style="width: 100%;height: 200px;border: 1px solid black;">菜单一</div>
                <div style="width: 100%;height: 200px;border: 1px solid black;">菜单一</div>
            </div>
        </div>
        <div class="right" style="background-color: blue;flex: 1 1 0%;height: 100%;" >
            <div class="headerright" style="width: 100%;height: 50px;background-color:aqua;display: flex;justify-content: space-between;">
                右边导航的顶部
                <div style="pos">左边按钮</div>
                <div style="pos">右边按钮</div>
            </div>
            <div class="content" style="width: 100%;height: 100%;background: blueviolet;overflow-y: scroll;height: 100%;">
                <div style="width: 100%;height: 200px;border: 1px solid black;">内容</div>
                <div style="width: 100%;height: 200px;border: 1px solid black;">内容</div>
                <div style="width: 100%;height: 200px;border: 1px solid black;">内容</div>
                <div style="width: 100%;height: 200px;border: 1px solid black;">内容</div>
                <div style="width: 100%;height: 200px;border: 1px solid black;">内容</div>
                <div style="width: 100%;height: 200px;border: 1px solid black;">内容</div>
                <div style="width: 100%;height: 200px;border: 1px solid black;">内容</div>
            </div>
        </div>
    </div>
</body>

</html>

麦文豪（victor）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
系统后台默认界面，布局

<html><head> <title>我的第一个 HTML 页面</title> <style> html,body{ height: 100%; } </style></head><body style="margi...
复制链接

扫一扫