双列布局css的问题

<!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>
    .parent{
      display: flex;
      height: 200px;
      border: solid darkcyan 1px;
      overflow-y: auto;
    }
    .left{
      background: lightblue;
      height: 300px;
      width: 50%;
    }
    .right{
      width: 50%;
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="left">
    </div>
    <div class="right"></div>
  </div>
</body>

</html>

结果如下
图片.png

如何设置right的样式,让right的高度和left一样高?

阅读 1.9k
4 个回答
 <div class="parent">
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
        </div> 
    </div>

在parent下在写一个box容器,box容器不用写高度,高度由内容撑开就行了

.parent 的高度去掉,让它被子代撑开。

父容器加一个 align-items:stretch 如果不起作用,就换成justify-content:stretch 记不清了

这种不能搞吧?一般都是sticky或者fixed

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