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

フローティング div を で囲む div にラップしposition: relative、左のフロートに を付けposition: absoluteて、確実に一番下に移動するようにします。

左のフローティング div には、最初に参照高さが必要です。外側の囲み div により、高さ 100% の div でコンテナーの高さ全体を使用できます。

右のフロートを に変更しfloat: right、ヘッダーにz-index: 2.

jsFiddle で表示

于 2013-02-28T12:55:13.747 に答える