自适应屏幕高度布局

来源：互联网发布：法瑞尔威廉姆斯知乎编辑：程序博客网时间：2024/04/30 20:31

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

方式一：

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

自适应屏幕高度布局，高度用%而不要用px。

当两个div使用 float排在一行时，下面的元素记得要清除浮动：clear：both；
这里写图片描述

阅读全文

0 0