Question

我有一个100％高度的左浮动和100％的右浮动。一切正常，直到我用文字填满一边，另一边就会停止。

我该如何解决这个问题？

Answer 1

在为两列插入父css后，您可以使用div表。例如：

您的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}

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%;
}

Answer 3

用position: relative将浮动div包裹在一个封闭的div中，然后给左浮动position: absolute以确保它移到底部。

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

我已将右浮动更改为float: right，并为标题添加了z-index: 2。

View on jsFiddle

如何获得100％高度的浮动div始终保持100％

3 个答案: