自适应屏幕高度布局

最新推荐文章于 2026-03-23 01:20:17 发布

原创最新推荐文章于 2026-03-23 01:20:17 发布 · 3.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

html5+css3

本文介绍了三种实现自适应屏幕高度布局的方法，强调在布局设计中使用百分比而不是像素单位，确保元素能按比例适应浏览器的宽高。同时，针对使用float布局的情况，提到了清除浮动的重要技巧：clear: both。

要达成的效果：按比例自适应浏览器宽高
这里写图片描述

方式一：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style type="text/css">
        html, body {
            margin:0;
            padding:0
        }
        .container{
            height: 100%;  /*设置高度100%*/
            width:100%;    
            position: absolute;   /*设置绝对定位absolute或fixed*/
            text-align:center;
        }
        .header{
            background-color: blue;
            height: 10%;
        }
        .content{
            background-color: yellow;
            height:80%;
        }
        .test1{
            height: 30%;
            background-color: orange;
        }
        .footer{
            background-color: blue;
            height: 10%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">测试内容</div>
        <div class="content" >
            测试内容
            <div class="test1">测试</div>
        </div>
        <div class="footer">测试内容</div>
    </div>
</body>
</html>

方式二：

    <style type="text/css">
        html, body {
            height: 100%;  /*html和body的高度都为100%*/
            margin:0;
            padding:0
        }
        .container{
            height: 100%;  /*整体高度100%*/
            width:100%;    
            text-align:center;
        }
    </style>

方式三：

    <style type="text/css">
        *{
            height: 100%;  /*全部的高度都为100%*/
            margin:0;
            padding:0
        }
        .container{
            /*height: 100%; */  /*继承*的css属性，高度也为100%，可以不用写容器的高度*/
            width:100%;    
            text-align:center;
        }
    </style>