前端上下左中右布局示例

最新推荐文章于 2024-01-17 07:00:00 发布

zuccsunshine

最新推荐文章于 2024-01-17 07:00:00 发布

阅读量243

点赞数

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

本文链接：https://blog.csdn.net/zuccsunshine/article/details/122467314

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

top1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下左中右布局</title>
    <link rel="stylesheet" href="bb.css">
</head>
<body>
    <div class="container">
        <div class="header">这是顶部</div>
        <div class="left" id="left_content">
            <script>
                for (var i = 1; i <= 500; i++) {
                    document.getElementById("left_content").innerHTML = document.getElementById("left_content").innerHTML + i.toString() + "<br/>";
                }
            </script>
        </div>
        <div class="middle" id="middle_content">
            <script>
                for (var i = 1; i <= 500; i++) {
                    document.getElementById("middle_content").innerHTML = document.getElementById("middle_content").innerHTML + (i * 10).toString() + "<br/>";
                }
            </script>
        </div>
        <div class="right" id="right_content">
            <script>
                for (var i = 1; i <= 500; i++) {
                    document.getElementById("right_content").innerHTML = document.getElementById("right_content").innerHTML + (i * 100).toString() + "<br/>";
                }
            </script>
        </div>
        <div class="footer">这是底部</div>
    </div>

</body>
</html>

top1.css


html,
body {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    /*text-align: center;*/
}
.container {
    width: 100%;
    height: 100%;
    position: relative;
    background: deeppink;
}
.header {
    width: 100%;
    height: 10%;
    background: red;
    line-height: 50px;
    position: absolute;
}

.left {
    top:  10%;
    bottom: 10%;
    width: 20%;
    background: yellow;
    position: absolute;
    overflow: auto;
}

.middle {
    top:  10%;
    left: 20%;
    bottom: 10%;
    right: 20%;
    background-color: #F0E68C;
    position: absolute;
    overflow: auto;
}
.right {
    top:  10%;
    bottom: 10%;
    width: 20%;
    background: blue;
    position: absolute;
    overflow: auto;
    right: 0px;
}
.footer {
    /*margin: 15px auto;*/
    width: 100%;
    height: 10%;
    background: green;
    line-height: 50px;
    position: absolute;
    bottom: 0px;
}

zuccsunshine

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端上下左中右布局示例

top1.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>上下左中右布局</title> <link rel="stylesheet" href="bb.css"></head><body> <div class="container">
复制链接

扫一扫