常见的响应式四合院布局

最新推荐文章于 2025-05-18 17:59:59 发布

正在奔跑的鱼儿

最新推荐文章于 2025-05-18 17:59:59 发布

阅读量151

点赞数

分类专栏：布局相关文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/dazhangyu168/article/details/129681052

版权

布局相关专栏收录该内容

1 篇文章

订阅专栏

在这里插入图片描述
如果有这样的响应式需求，我们前端估计想到的一般就是display:flex布局方案。那么我们就用flex布局吧，一般要注意的是高度的问题，需要在外加上一个容器标签。
代码如下：

 <style>
    *{
      margin:0;
      padding:0;
    }
    .contain{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height:100vh;
    }
    .headerP{
      height:60px;
      background-color: bisque;

    }
    .mainP{
      flex: 1;
      display: flex;
    }
    .leftP,.rightP{
      width:200px;
      background-color: aqua;
    }
    .midP{
      flex:1;
    }
    .footerP{
      height:60px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="contain">
    <div class="headerP">header</div>
    <div class="mainP">
      <div class="leftP">left</div>
      <div class="midP">mid</div>
      <div class="rightP">right</div>
    </div>
    <div class="footerP">footer</div>
</div>

当然上面的需求并不满足于以前老版本的需要，于是乎我又想了一下，可以用以前老的方案position来作兼容呀。代码如下：

 <style>
    *{
      margin:0;
      padding:0;
    }
    html, body {
      height:100%;
    }
    .contain{
      position: relative;
      height:100%;
    }
    .headerP{
      height:60px;
      background-color: bisque;
      width:100%;
    }
    .mainP{
      position: absolute;
      width:100%;
      bottom:60px;
      top:60px;
    }
    .leftP,.rightP{
      width:200px;
      background-color: aqua;
      position: absolute;
      top:0px;
      bottom:60px;
      height: 100%;
    }
    .leftP{
      left:0px;
    }
    .midP{
      position: absolute;
      top:0px;
      bottom:60px;
      left:200px;
      right:200px;
      height: 100%;
      background-color: #ddd;
    }
    .rightP{
      right:0px;
    }
    .footerP{
      width:100%;
      height:60px;
      background-color: pink;
      position: absolute;
      left:0;
      bottom:0;
    }
  </style>
</head>
<body>
  <div class="contain">
    <div class="headerP">header</div>
    <div class="mainP">
      <div class="leftP">left</div>
      <div class="midP">mid</div>
      <div class="rightP">right</div>
    </div>
    <div class="footerP">footer</div>
</div>

在写着写着突然想到貌似还有一种display:grid的二维布局，这东西真的直接把代码写得真爽呀;代码如下：

<style>
    *{
      margin:0;
      padding:0;
    }
    .contain{
      height:100vh;
      display: grid;
      grid-template-rows: auto 1fr auto;
    }
    .headerP{
      height:60px;
      background-color: bisque;
    }
    .mainP{
      display: grid;
      grid-template-columns: 200px auto 200px;
    }
    .leftP,.rightP{
      background-color: aqua;
    }
    .midP{
      background-color: #ddd;
    }
    .footerP{
      height:60px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="contain">
    <div class="headerP">header</div>
    <div class="mainP">
      <div class="leftP">left</div>
      <div class="midP">mid</div>
      <div class="rightP">right</div>
    </div>
    <div class="footerP">footer</div>
</div>