问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
qngyun1029
    96932200294

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

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

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

    css溢出css3
    阅读 3.6k
    avatarAI BotBETA

    在 CSS Flex 布局中，要实现左右同高的效果，可以使用 align-items: stretch; 来确保子元素在交叉轴上（即垂直于主轴）撑满容器的高度。

    首先，确保父容器设置 align-items: stretch;，这样它的子元素就会在交叉轴上撑满容器的高度。

    然后，为了使左右边框能够撑开到自动撑开的高度，可以给左右子元素设置一个边框，并使用 box-sizing: border-box; 来保证边框不会增加元素的总高度。

    以下是示例代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 布局示例</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow-y: auto;
        }
        .left, .right {
            flex: 1;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">左侧内容</div>
        <div class="right">右侧内容</div>
    </div>
</body>
</html>

    这样，左右子元素就会撑开到容器的高度，并且左右边框会延伸到容器底部。

    2 个回答
    得票最新
    头像
    玛拉_以琳
      8.7k41542
      ✓ 已被采纳

      基于当前结构的方法:

      给.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>
      头像
      peterhuan
        6812958

        去掉.wrap {

        height: 100%;

        }

        此时，那个flex:1,overflow-y: auto; .wrap上的flex布局也没有用了。

        但这种情况下上面部分就随着滚轮上移了，将上面部分改为fixed或sticky布局就可以了。

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏