布局问题:分栏高度等于设置了高度的一栏

图如下，左边区域宽高是动态的

width: calc(100% - 330px);
padding-bottom: 40%;
height: 0;

右边宽度为300px，高度与左边持平
如何实现右边分栏高度等于左边，且超出部份scroll

图片描述

codeOpen

css

阅读 1.9k

2 个回答

1,通过js或jq获取左侧栏目高度，将高度赋给右栏，然后超出设置sroll (安全)

var lhenght = $('.left').outerHeight();
$('.right').css('height', lhenght+'px')

2,使用flexbox (需要兼容)
3, grid (需要兼容)

stone

2.3k1310

发布于
2019-01-14

用 flex 就很简单了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        .wrapper {
            display: flex;
        }
        .left {
            flex: 1;
        }
        .right {
            flex: 0 0 300px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

布局问题:分栏高度等于设置了高度的一栏

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

图片沿着圆环的转动有什么方法吗？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

Scss的rgba()方法无法对变量进行二次编译？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？