0

HTML ページがあり、次のような 3 つの div が含まれています: リンク 

<div style="min-height:100%;">
        <div id="TopContent" style="display: inline-block; height: 100px; width: 100%; background-color: #CCDEBB;">
        </div>

        <div id="LeftContent" style="display: inline-block; width: 25%; border: 3px solid #DFE8F6;">

                </div>             

        <div id="RightContent" style="border: 3px solid #b8cfee; display: inline-block; float: right; width: 72%;">


        </div>

            </div>

ページの高さの値に応じて、LeftContent と RightContent の高さの値を設定したいと考えています。つまり、LeftContent と RightContent の高さがページの最後まで伸びています。

4

7 に答える 7

1

calc() を使用します。

#LeftContent{
float:left;
margin-right:3px;
height:calc(100% - 100px); //-100px because height of top bar is 100px

}

権利コンテンツも同様

于 2013-10-21T12:11:20.450 に答える
1

この HTML で高さを制御することはできませんが、:before/:after 要素を使用してこの効果をエミュレートできます。

#LeftContent:after,
#RightContent:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:9999px;
    z-index:-1;
    background:#DFE8F6;
}
#RightContent:after{background:#b8cfee;}

http://jsfiddle.net/EhnhZ/

于 2013-10-21T12:11:24.433 に答える
0

この質問の回答を使用して回答を作成しました

<style>
    html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
</style>

<div style="min-height:100%;height:100%;">
    <div id="TopContent" style="height: 100px; width: 100%; background-color: #CCDEBB;">
    </div>

    <div id="LeftContent" style="min-height:100%;width: 25%; border: 3px solid #DFE8F6;float:left">    
    </div>             

    <div id="RightContent" style="min-height:100%;border: 3px solid #b8cfee; width:72%;float:right">
    </div>
</div>
于 2013-10-21T12:11:49.367 に答える
0

現在、ソリューションは機能しません。これは、Web ページのdocumentsレンダリング方法が原因です。

HTML からの現時点で、現在のドキュメントは次の高さです。

100px (from TopContent)

+ 3px (from LeftContent)

+ 3px (from RightContent)

は(コンテンツに基づいて)documentよりも大きくする必要がないため、要素はそれ以上にはレンダリングされません。106pxdocument

これをだますためにできることは、body/html CSS 属性の高さを 100% に設定することです。

これを行うには、次の CSS を使用します。

body,html {
    height:100%;
}

また、コンテナ div の高さを次のように設定する必要があります。

<div style="height:100%;">

問題のJSFiddleの例を次に示します。

于 2013-10-21T12:12:56.610 に答える
-2

jquery を使用する必要があります。このイベントでは、div の高さを設定します 

$(window).resize(function () {
 $('#LeftContent').css('height',$(window).height());
 $('#RightContent').css('height',$(window).height());
        });
于 2013-10-21T12:08:50.557 に答える