新手的CSS前端框架设计，自适应浏览器变化

最新推荐文章于 2023-06-04 22:14:03 发布

lsqtzgj

最新推荐文章于 2023-06-04 22:14:03 发布

阅读量845

点赞数 1

分类专栏： Web前端文章标签： css

本文链接：https://blog.csdn.net/lsqtzgj/article/details/72357815

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用前先加入HTML初始化CSS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }

        #header{
            width: 100%;
            height: 50px;
            background: #222222;
            position: fixed;
            display: block;
            z-index: 1030;
        }

        #sidebar{
            width: 200px;
            position: fixed;
            top: 50px;
            bottom: 0;
            left: 0;
            display: block;
            overflow-x: hidden;
            overflow-y: auto;
            background-color: red;
            float:left;
        }

        #main{
            position: relative;
            left: 200px;
            top: 50px;
            float: left;
            display: block;
            overflow-y: auto;
            background: yellow;
        }
    </style>
    <title>Title</title>
</head>
<body>
    <div id="header">123</div>
    <div id="sidebar">456</div>
    <div id="main">789</div>
</body>
</html>