css flex左右布局，左右如何同高？

站长

2024年06月23日 09:54 · 阅读数 7

css flex 布局，页面分为上下两部分，下面通过 flex: 1; 撑开，并且 overflow-y: auto；下面又分为左右布局，左右高度不一定，想要设置一个边框分割左右，但是边框始终到最底部；

下半部分左右边框高度能够到自动撑开的高度

css flex左右布局，左右如何同高？

https://codesandbox.io/p/devbox/flexbu-ju-zi-dong-cheng-gao-8...

1个回答

test

2024-06-23

基于当前结构的方法:

给.rht和.lft盒子添加:

.rht {
    height: min-content;
}

这样这个弹性盒子就会被子盒子内容撑开然后使用JQuery 获取rht的高度赋值给.lft的子盒子div:

let h = $(".rht").height() + 'px';
$(".lft div").css({
    height: h
});

使用新的结构实现

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      border: 0;
      margin: 0;
    }

    html,
    body,
    .wrapper {
      height: 100%;
    }

    .top {
      height: 100px;
      width: 100%;
      background: #e3e3e3;
      position: fixed;
      top: 0;
    }
    .top2 {
      height: 100px;
      width: 100%;
      background: #e3e3e3;
    }

    .content {
      display: flex;
      height: 100%;
      height: min-content;
    }

    .lft {
      flex: 1;
    }

    .rht {
      width: 600px;
      flex-shrink: 0;
      border-left: 1px solid red;
      height: min-content;
      background: red;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="top">nav</div>
    <div class="top2"></div>
    <div class="content">
      <div class="lft">
        <div style="height: 100%; background: #d1b0b0;">lft</div>
      </div>
      <div class="rht">
        <div style="height: 300px;">rht 1</div>
        <div style="height: 300px;">rht 2</div>
        <div style="height: 300px;">rht 3</div>
        <div style="height: 300px;">rht 4</div>
        <div style="height: 300px;">rht 5</div>
        <div style="height: 300px;">rht 6</div>
      </div>
    </div>
  </div>
</body>
<script>
</script>
</html>

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容