自适应布局

　　之前在几个CSS布局问题中，举了上下固定，中间自适应布局的例子，当时的例子父级元素的宽高都给定了，其实并不是个好例子，既然要自适应，父级元素就应该跟着页面大小变化，从而中间子元素也自适应。3种方法，其实是2种，因为是针对body，所以用fixed可以直接替换absolute来用。注意同时给html和body的height100%，只给一个不行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
# {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 60px;
  }
  .class1 {
    height: 200px;
    width: 100%;
    background: #ccc;
    position: absolute;
    /*position: fixed;*/
    top: 0;
  }

  .class2 {
    width: 100%;
    background: #888;
    position: absolute;
    top: 200px;
    bottom: 200px;
  }

  .class3 {
    height: 200px;
    width: 100%;
    background: #333;
    position: absolute;
    /*position: fixed;*/
    bottom: 0;
  }
</style>
<body>
  <div class="class1">1111</div>
  <div class="class2">2222</div>
  <div class="class3">3333</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
# {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-size: 60px;
  }
  .class1 {
    height: 200px;
    width: 100%;
    background: #ccc;
  }

  .class2 {

    width: 100%;
    background: #888;
    flex: 1;
  }

  .class3 {
    height: 200px;
    width: 100%;
    background: #333;
  }
</style>
<body>
  <div class="class1">1111</div>
  <div class="class2">2222</div>
  <div class="class3">3333</div>
</body>
</html>

注意用flex的时候，所有的position布局的属性都要删掉。

 

posted @ 2019-06-18 22:32  姜瑞涛  阅读(167)  评论(0)  编辑  收藏  举报