在css中,页面的布局有很多是能够根据窗口的大小来调整的,做这种页面就需要宽高自适应来做。
宽高自适应在导航以及经典的三栏布局和二栏布局中常见。
8.1宽度自适应
在宽度自适应中,我们可以设置为width:"auto"或者省略不写,会默认为自适应,但不能写成width=100%否则可能会出现滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;
}
html,body{
height: 100%;
}
div{
width: 100%;
background-color:red ;
height: 100%;
padding-left: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
可以看到,此时页面下方出现滚动。只有设置为auto或者不写实才是宽度真正的自造应
div{
background-color:red ;
height: 100%;
padding-left: 400px;
}
8.2高度自适应
盒子会根据窗口的大小进行改变
html,body{
height: 100%;
}
常用的作用两栏布局的方法有两种,一种是float,另外一种是calc函数。其中calc函数要注意两边空白。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;
}
html,body{
height: 100%;
}
div{
background-color:red ;
height: 100%;
width: 400px;
float: left;
}
.box1{
height: 100%;
width: calc(100% - 400px);
background-color: sandybrown;
}
</style>
</head>
<body>
<div></div>
<div class="box1"></div>
</body>
</html>