CSS 【实战】 “四合院”布局

最新推荐文章于 2024-07-06 09:55:36 发布

朝阳39

最新推荐文章于 2024-07-06 09:55:36 发布

阅读量545

点赞数 4

分类专栏： # CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_41192489/article/details/139243680

版权

CSS 专栏收录该内容

149 篇文章 13 订阅

订阅专栏

效果预览

在这里插入图片描述

页面要求：

上下固定高度
左右固定宽度
中间区域自适应宽高
整个页面内容撑满全屏，没有滚动条

技术要点

使用 html5 语义化标签

header 网页内的标题区域
nav 导航区域
aside 侧边栏
footer 页脚区域
section 内容分区
article 文章区域

清除浏览器默认的内外边距

html,
body {
  padding: 0px;
  margin: 0px;
}

否则会出现滚动条

设置内容高度为 100 vh 撑满屏幕

body {
  height: 100vh;
}

另一种方案是设置 html 和 body 高度为 100%

html,body {
  height:100%
}

flex实现自适应布局

垂直方向

body {
  display: flex;
  flex-direction: column;
}
#mainBox {
  flex-grow: 1;
}

水平方向

#mainBox {
  display: flex;
}
#centerBox {
  flex-grow: 1;
}

演示代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS “四合院”布局</title>
    <style>
      html,
      body {
        padding: 0px;
        margin: 0px;
      }

      body {
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
      header {
        height: 100px;
        background-color: blue;
      }

      footer {
        height: 60px;
        background-color: black;
      }
      #mainBox {
        flex-grow: 1;
        background-color: gray;
        display: flex;
      }
      #leftBox {
        width: 300px;
        background-color: red;
      }
      #centerBox {
        flex-grow: 1;
      }
      #rightBox {
        width: 200px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <header></header>
    <section id="mainBox">
      <aside id="leftBox"></aside>
      <article id="centerBox"></article>
      <aside id="rightBox"></aside>
    </section>
    <footer></footer>
  </body>
</html>