CSS 左右布局

Windyluna

已于 2023-06-26 11:42:37 修改

阅读量696

点赞数

分类专栏： CSS 文章标签：前端

于 2021-11-19 12:01:31 首次发布

本文链接：https://blog.csdn.net/windyluna/article/details/121419504

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、效果一：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content-box {
        height: 100%;
        display: flex;
      }
      /* 左侧 */
      .content-box .con-left {
        width: 15%;
        min-width: 200px;
        background: #eff6ff;
        height: 100%;
        display: block; /** 左边设置为 block **/
      }
      .con-left-head {
        background: #fff;
        height: 50px;
        line-height: 50px;
      }
      .con-left-body {
        /*固定高度*/
        height: calc(100vh - 136px);
      }
      .con-left-body .p-con {
        height: 100%;
        overflow: auto;
      }
      .p-con p {
        margin-bottom: 50px;
      }

      /* 右侧 */
      .con-right {
        flex: 1;
        height: 100%;
        overflow-y: auto; /* 右侧可滚动 */
        background: #f5f5f5;
      }
      .con-box {
        height: calc(100vh - 86px);
      }
      .con-box p {
        margin-bottom: 100px;
      }
    </style>
  </head>
  <body>
    <div class="content-box">
      <div class="con-left">
        <div class="con-left-head">
          <p>分类目录</p>
        </div>
        <div class="con-left-body">
          <div class="p-con">
            <p>分类一</p>
            <p>分类二</p>
            <p>分类三</p>
            <p>分类四</p>
            <p>分类六</p>
            <p>分类七</p>
            <p>分类八</p>
            <p>分类九</p>
            <p>分类十</p>
            <p>分类十一</p>
            <p>分类十二</p>
            <p>分类十三</p>
            <p>分类十四</p>
            <p>分类十五</p>
            <p>分类十六</p>
            <p>分类十七</p>
            <p>分类十八</p>
            <p>分类十九</p>
            <p>分类二十</p>
          </div>
        </div>
      </div>
      <div class="con-right">
        <div class="con-box">
          <p>内容一</p>
          <p>内容二</p>
          <p>内容三</p>
          <p>内容四</p>
          <p>内容五</p>
          <p>内容六</p>
          <p>内容七</p>
          <p>内容八</p>
        </div>
      </div>
    </div>
  </body>
</html>

二、效果二

最终效果：
在这里插入图片描述

布局：
在这里插入图片描述
使用 ResizeObserver Api监听DOM尺寸变化
参考：https://juejin.cn/post/7129046057719169055

代码实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .container {
        display: flex;
        width: 100vw;
        height: 100vh;
      }
      /* 左侧导航 */
      .box {
        height: 100%;
        width: 70px;
        background: rgba(218, 232, 252, 1);
        transition: 0.3s;
      }
      /* 右侧容器：充满剩余 */
      .right {
        flex: 1;
        background: #fff;
      }
      /* 底部固定内容 */
      .right .right-bottom {
        position: fixed;
        bottom: 0;
        height: 70px;
        background: rgba(245, 245, 245, 1);

        border-top: 1px solid #e6e6e6;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      /* 底部固定内容的红色块 */
      .right .right-bottom .red-block {
        width: 80px;
        height: 40px;
        background: rgba(248, 206, 204, 1);
        margin-right: 100px;
      }

      /* 以下是左侧导航的效果实现 */
      .box:hover {
        width: 195px;
      }
      .box a {
        margin: 0 auto;
        line-height: 50px;
        color: rgb(71, 71, 71);
        height: 50px;
        width: 88%;
        position: relative;
      }
      .box {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      .box a:nth-of-type(1)::before,
      .box a:nth-of-type(5)::before {
        content: "";
        position: absolute;
        bottom: -8px;
        width: 100%;
        border-bottom: 1px solid rgb(165, 173, 201);
      }
      .box a img {
        vertical-align: middle;
        margin-left: 15px;
        height: 35x;
        width: 35px;
      }
      .box span {
        position: absolute;
        white-space: nowrap;
        transition: 0.3s;
        opacity: 0;
        margin-left: 8px;
        top: 2px;
      }

      .box a:hover {
        color: black;
        background-color: rgba(204, 204, 204, 0.5);
      }
      .box:hover span {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">
        <a href="#"><img src="icons/1.png" alt="" /><span>list</span></a>
        <a href="#"><img src="icons/2.png" alt="" /><span>Warehous</span></a>
        <a href="#"><img src="icons/3.png" alt="" /><span>theme</span></a>
        <a href="#"><img src="icons/4.png" alt="" /><span>wallet</span></a>
        <a href="#"><img src="icons/5.png" alt="" /><span>picture</span></a>
        <!-- <a href="#"><img src="icons/6.png" alt="" /><span>OR code</span></a>
            <a href="#"><img src="icons/7.png" alt="" /><span>authentication</span></a>
            <a href="#"><img src="icons/8.png" alt="" /><span>cancellation</span></a> -->
      </div>
      <div class="right" id="boxRight">
        <div class="right-con">内容区域</div>
        <div class="right-bottom" id="boxRightBottom">
          <div class="red-block"></div>
        </div>
      </div>
    </div>

    <script>
      const boxRight = document.getElementById("boxRight");
      const boxRightBottom = document.getElementById("boxRightBottom");

      const resizeObserver = new ResizeObserver((entries) => {
        let rect = entries[0].target.getBoundingClientRect();
        boxRightBottom.style.width = rect.width + "px";
      });
      resizeObserver.observe(boxRight);
    </script>
  </body>
</html>