Question

我有一组并排的div（实际上使用HTML5部分，但我假设解决方案和行为是一样的）。他们坐在一个容器中，右侧拿着表格字段，左侧是摘要标题和信息。结构看起来像这样：

<div id="container">
    <div id="left" >Summary here</div>
    <div id="right">Form fields here</div>
</div>

我必须隐藏或显示各种字段，具体取决于使用javascript采取的操作，因此右侧和容器的实际高度不是静态的。我需要的是让左侧填充容器的高度，使其与右侧相匹配。我在互联网上尝试了很多解决方案，但似乎都没有。

提前致谢！

Answer 1

这是一个非常常见的问题。看看这篇文章......它有所有的答案：

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

现在，这是一个使用它的快速小提琴。尝试单击任何“Column＃”文本元素以从文档中删除它们......列将很好地调整大小：）

http://jsfiddle.net/UnsungHero97/qUT3d/9/

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

CSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

并排在容器中填充高度

1 个答案:

HTML

CSS