css—头部侧边栏内容布局

最新推荐文章于 2022-12-08 20:32:46 发布

GGYY.

最新推荐文章于 2022-12-08 20:32:46 发布

阅读量666

点赞数 1

分类专栏： css 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45682449/article/details/120443571

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果展示： 在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .head {
      position: fixed;
      height: 100px;
      width: 100%;
      background-color: pink;
    }
    .sider {
      position: fixed;
      top: 100px;
      width: 100px;
      height: 100vh;
      background-color: green;
    }
    .content {
      position: absolute;
      top: 100px;
      left: 100px;
      bottom: 0;
      right: 0;
      background-color: blue;
      overflow: scroll; /* 或 auto */
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="head">这里是头部</div>
    <div class="sider">这里是侧边栏</div>
    <div class="content">这里是内容</div>
  </div>
</body>

</html>

效果展示2：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .head {
      position: fixed;
      left: 100px;
      height: 100px;
      width: 100%;
      background-color: pink;
    }
    .sider {
      position: fixed;
      width: 100px;
      height: 100vh;
      background-color: green;
    }
    .content {
      position: absolute;
      top: 100px;
      left: 100px;
      bottom: 0;
      right: 0;
      background-color: blue;
      overflow: scroll;
      /* 或 auto */
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="head">这里是头部</div>
    <div class="sider">这里是侧边栏</div>
    <div class="content">这里是内容</div>
  </div>
</body>

</html>