CSS 利用position来确定位置布局

最新推荐文章于 2021-06-09 15:12:09 发布

Daniel799

最新推荐文章于 2021-06-09 15:12:09 发布

阅读量358

点赞数

分类专栏： CSS 文章标签： CSS position

本文链接：https://blog.csdn.net/u012664198/article/details/98629561

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html> 
    <head>
        <meta charset="utf-8">
        <style>
            #header{
                position: fixed;
                top:0;
                bottom: 80%;
                left:20%;
                right: 0;
                background: gray;
                margin-bottom: 2px;
            }
            #sidebar{
                position: fixed;
                top:0;
                bottom: 0;
                left: 0;
                right: 80%;
                background: silver;
                margin-right: 2px;
            }
            #main{
                position: absolute;
                top:20%;
                bottom: 0;
                left: 20%;
                right: 0;
                background: white;
                overflow:scroll;
            }
            #footer{
                position: fixed;
                bottom: 0;
                width: 100%;
                height: auto;
            }

        </style>
    </head>
    <body>
        <div id="web_content">
            <div id="header">This is header</div>
            <div id="sidebar">This is sidebar</div>
            <div id="main">This is main</div>
            <div id="footer">this is a footer</div>
        </div>      
    </body>
</html>

Daniel799

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 利用position来确定位置布局

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> #header{ position: fixed; top:0; ...
复制链接

扫一扫