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

news2024/9/21 14:46:07

效果预览

在这里插入图片描述

页面要求：

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

技术要点

使用 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>