在不使用CSS的height属性的情况下，根据右侧容器的高度调整左侧容器 [英] Adjust the left container as per right container height without using height property in css

问题描述

我有两个div，一个左侧，另一个右侧.在右侧，通过单击左侧菜单可动态加载内容.基于内容物的高度，左侧容器也将增加相同的高度.我为这个问题附上了截图

I have two divs one left side and another right side . In right side contents are dynamically loaded by click the left side menus. Based on the contents height the left side container also increase by same height. i attached screenshot for this problem

预期结果为:

！[在此处输入图片描述] [3]

![enter image description here][3]

任何帮助将不胜感激.谢谢

Any help be appreciated. Thanks

推荐答案

您可以按以下步骤实现，基本上我们是在使用相对位置并对其进行处理

You can achieve this as follows, basically we are using position relative and playing with it

演示

Demo

HTML

<div id="container2">
    <div id="container1">
        <div id="col1">
            <!-- Column one start -->

        </div>
        <div id="col2">
            <!-- Column two start -->

        </div>
    </div>
</div>

CSS

#container2 {
    clear:left;
    float:left;
    width:100%;
    overflow:hidden;
    background:#ffa7a7; /* column 2 background colour */
}
#container1 {
    float:left;
    width:100%;
    position:relative;
    right:50%;
    background:#fff689; /* column 1 background colour */
}
#col1 {
    float:left;
    width:46%;
    position:relative;
    left:52%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:46%;
    position:relative;
    left:56%;
    overflow:hidden;
}

原创文章

这篇关于在不使用CSS的height属性的情况下，根据右侧容器的高度调整左侧容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！