问答博客资讯标签用户活动
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使左右框的高度相等

头像
nicorandil_cav
    11311833

    在布局中，有左右两个框，右边的框的高度是不确定，根据内容自适应的，在不使用js的前提下，如何使左右框的高度相等。

    css
    阅读 12.3k
    9 个回答
    得票最新
    头像
    sen_
      161148
      ✓ 已被采纳
      <div class="box">
    <div class="el1"></div>
    <div class="el2">
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
    </div>
</div>

//css
.box {display:flex;}
.el1 {height:auto;background:green;width:100px;}
.el2 {background:blue;flex:1;}
      头像
      七橘子
        63831630

        左右框的高度相等，一般情况下，我选择的办法是display:table;
        例如：
        布局：<div><span></span><span></span></div>
        css： div{display: table;width:100%;}

          span{display: table-cell;}

        两个span就是你的左右框，高度保持相等

        头像
        debugger
          3345

          设置浮动应该可以的

          头像
          大青山Z
            20112

            具体思路就是左边盒子通过绝对定位紧贴父元素，当然父元素要相对定位才能达到效果
            右边盒子是普通盒子，通过自己的高度去吧父元素撑开
            代码如下：

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

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .wrap {
            height: 100%;
            width: 1200px;
            margin: 0 auto;
            position: relative;
            text-align: right;
        }
        
        .item {
            width: 300px;
            min-height: 300px;
            display: inline-block;
            background-color: #000;
            height: 100%;
        }
        
        .right {
            width: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 400px;
        }
        
        .left {
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="item right"></div>
        <div class="item left"></div>
    </div>
</body>

</html>
            头像
            转身远方
              13
              新手上路，请多包涵

              外层用display：table，左右用display：table-cell

              头像
              码农小余
                28832949

                用less或者table和table-cell结合

                头像
                华猾稽
                  1.1k1924
                  .p {
    width: 250px;
    padding-left: 250px;
    position: relative;
}

.c1, .c2 {width: 240px;margin: 0 5px;}

.c1 {
    height: 100%;
    position: absolute;
    top: 0;left: 0;
}
                  <div class="p">
    <div class="c1" style="background: red;"></div>
    <div class="c2" style="background: orange;height: 250px;"></div>
</div>

                  Chrome 测试成功。其余浏览器尚未测试。

                  头像
                  colahan
                    753

                    左右等高，右边高度自适应，那左边有没有可能高过右边？？？如果左边有可能高过右边的话，那这种布局只能用display：table了，如果右边高度自适应，那就让右边高度撑开父级（position:relative;），然后左边高度(position:absolute;top:0;bottom:0;)和父级等高，这样就实现了等高布局了。如果还是不太明白可以下面留言，我尝试帮你实现一下。

                    查看全部 9 个回答
                    推荐问题