自适应屏幕高度布局

最新推荐文章于 2022-03-09 08:34:07 发布

原创最新推荐文章于 2022-03-09 08:34:07 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #布局

前端同时被 2 个专栏收录

16 篇文章

订阅专栏

html5+css3

6 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

方式一：

<!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>