4

我有一个 100% 高度的左浮动和 100% 的右浮动。一切正常，直到我用文本填充一侧而另一侧将停止。

我怎样才能解决这个问题？

4

3 回答 3

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%;
}
于 2013-03-01T04:44:29.520 回答
2

您可以在为两列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}
于 2013-02-28T12:41:24.803 回答
1

Wrap the floating divs in an enclosing div with position: relative, then give the left float with position: absolute to make sure it goes to the bottom.

The left floating div needs a reference height to start with. The outer enclosing div allows a 100% height div to take the full height of the container.

I have changed the right float to float: right and given the header with a z-index: 2.

View on jsFiddle

于 2013-02-28T12:55:13.747 回答