css上下两栏布局（上栏固定下栏自适应）

最新推荐文章于 2022-06-06 18:08:25 发布

xinxin_zhu

最新推荐文章于 2022-06-06 18:08:25 发布

阅读量1.6k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/xinxin_zhu/article/details/105972965

版权

本文介绍了如何使用CSS来创建一个布局，其中上栏高度固定，而下栏则根据剩余空间自动调整高度，实现自适应效果。通过实例代码，展示了实现这种布局的关键CSS技巧。

摘要由CSDN通过智能技术生成

1.效果图

<html>

<head>
    <title>上下两栏布局（上部固定，下栏自适应）</title>
    <meta charset="utf-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
    </style>
</head>

<body>
    <section class="layout">
        <style>
         .layout{
             height: 100%;
         }
         .layout .left-content .top{
             width: 100%;
             height: 60px;
             background-color: aqua;
         }
         .layout .left-content .content{
             position: absolute;
             top: 60px;
             bottom: 0px;
             width: 100%;
             overflow: auto;
             background-color: red;
         }
        </style>

最低0.47元/天解锁文章

xinxin_zhu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css上下两栏布局（上栏固定下栏自适应）

1.效果图<html><head> <title>上下两栏布局（上部固定，下栏自适应）</title> <meta charset="utf-8"> <style> * { padding: 0; margin: 0; ...
复制链接

扫一扫