如何让高度为100%的浮动div始终保持100%？

Question

我有一个左浮动，高度为100%，右浮动为100%。一切正常，直到我在一侧填满文本，另一侧将停止浮动。

我该如何解决？

- user2094315

---

你想让它们继续扩展吗？如果不是，请考虑为两者设置max-height。 - Raul Rene

是的，我希望左右两侧无论有多少文本，都保持100％的高度。 - user2094315

Answer 1

您可以在为两个列插入父级

之后使用css表格。例如：

您的HTML代码：

<div id="parent">
    <div id="leftcolumn"></div>
    <div id="rightcolumn"></div>
</div>

您的CSS：

#parent{display:table-row}
#leftcolumn{display:table-cell}
#rightcolumn{display:table-cell}

- otinanai

Answer 2

请尝试以下代码。

在HTML中：

<div class="content">
<!-- Start UI Leftside -->
    <div class="ui-leftside">
        <div class="ui-cont">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
        </div>
    </div>
<!-- End UI Leftside -->
<!-- Start UI Rightside -->
    <div class="ui-rightside">
        <div class="ui-cont">
            <p>Add Text here how long you want</p>
        </div>
    </div>
    <div class="clear"></div>
<!-- End UI Rightside -->
</div>

CSS中，

.content {
    position: absolute;
}

.ui-leftside {
    background: none repeat scroll 0 0 #F7F7F7;
    float: left;
    height: 100%;
    margin: 0;
    min-height: 100%;
    padding: 0;
    position: absolute;
    width: 25%;
}

.ui-cont {
    margin: 0;
    padding: 60px 0 10px;
}


p {
    margin: 0;
    padding: 0;
}


.ui-rightside {
    background: none repeat scroll 0 0 #999999;
    float: right;
    height: 100%;
    margin: 0;
    min-height: 100%;
    padding: 0;
    width: 75%;
}

- Kvadiyatar

Answer 3

将浮动的div包裹在一个带有position: relative属性的封闭div中，然后使用position: absolute属性给左侧浮动的div设置位置，以确保它到达底部。

左侧浮动的div需要一个参考高度来开始。外部封闭的div允许一个100%高度的div占据整个容器的高度。

我已经将右侧浮动改为float: right并给头部添加了z-index: 2。

在jsFiddle上查看

- Antony