根据右侧容器高度调整左侧容器,而不使用css中的height属性(Adjust the left container as per right container height without using height property in css)

171 IT屋

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

enter image description here

Expected result be:

enter image description here

![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;
}

Original Article

我有两个div,一个是左侧,另一个是右侧。右侧内容通过单击左侧菜单动态加载。基于内容高度,左侧容器也增加相同的高度。我附上此问题的屏幕截图





预期结果为:





![在此输入图像说明] [3]



任何帮助表示感谢。谢谢


解决方案

您可以按照以下方式实现此目的,基本上我们使用位置相对并使用它来玩



演示



HTML



 < div id =container2 > 
< div id =container1>
< div id =col1>
<! - 第一栏开始 - >

< / div>
< div id =col2>
<! - 第二栏开始 - >

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


CSS



< pre> #container2 {
clear:left;
float:left;
宽度:100%;
溢出:隐藏;
背景:#ffa7a7; / *第2列背景颜色* /
}
#container1 {
float:left;
宽度:100%;
头寸:相对;
右:50%;
背景:#fff689; / *第1列背景颜色* /
}
#col1 {
float:left;
宽度:46%;
头寸:相对;剩余
:52%;
溢出:隐藏;
}
#col2 {
float:left;
宽度:46%;
头寸:相对;剩余
:56%;
溢出:隐藏;
}


原始文章


本文地址:IT屋 » 根据右侧容器高度调整左侧容器,而不使用css中的height属性