親コンテナの残りのスペースの100％を使用するようにDIVを設定するにはどうすればよいですか？

私が抱えている問題は、次の構造化されたコードがあることです。基本的には、ULがページのトップ37ピクセルを占めていて、それに続くdivがブラウザのウィンドウの残っているを占めるようにしたいと思います。親コンテナの残りのスペースの100％を使用するようにDIVを設定するにはどうすればよいですか？

したがって、ウィンドウのサイズを変更して背を高くすると、divの紫色の背景が下部領域全体を埋めるようになります。私が持っている問題は、紫色のDIVの高さを100％に設定した場合、スクロールバーを作成するのは、DIVを親のサイズの100％にすることで、の100％ではなく残ります。 ULは説明されています。

<body style="padding:0; margin:0;border-width:1px;border-color:Gray; border-style:dashed; position:absolute; left:0px; right:0px; top:0px; bottom:0px;"> <div style="margin:0; padding:0; left:0px; right:0px; top:0px; bottom:0px;margin:0;height: 100%;border-width:1px;border-color:Green; border-style:dashed;"> <div style="margin:0; padding:0; height:100%;border-width:1px;border-color:Red; border-style:dashed;"> <ul style="padding:0;margin:0;border-width:1px;border-color:Blue; border-style:solid; left:0px; right:0px; top:0px; bottom:0px;"> <li >Test Item</li> </ul> <div style="height:100%;background-color:Purple;">Test Content</div> </div> </div>

編集：私は、私はChromeの最新バージョンでは、私のテストをやっていることに注意する必要がありますが、私はIE9で同じ動作とFirefoxの最新バージョンを参照してください。

出典

2012-03-21 987 S

はオーバーフローを設定します。トラブルシューティングツールとして各部門に境界線：1ピクセルの赤色（または任意の色）を設定することもできます。 – Brian

これは部門のデフォルトの動作です...なぜ ''要素で 'position：absolute'を使用していますか？あなたは 'min-height：100％'を使うつもりでしたか？ – animuson

私はそれを取り出して最小高さを使用しても、紫色はウィンドウの残りの高さ全体には及ばないことはわかりません。そしてブライアンの提案は何も変わらなかった。 –

divを使用してそれらをラップする必要があると思います。あなたはABSOLUTポジショニングと

例にそれを行うことができます例

<div id="wrapper" style="height: 100%;position:relative;"> 
<ul> 
    <li >Test Item</li> 
</ul> 

<div style="height:100%;position: absolute; left:0; top:0;padding-top: 39px; z-index: -1">Test Content</div> 
</div>

出典

2012-03-21 15:36:07 safrazik

これはうまくいかない理由のためにスクロールバーがまだ残っているため、これは機能しません。 –

：初心者のための親のdivの自動：http://jsfiddle.net/HerrSerker/zXV7V/

<div class="wrap"> 
    <div class="top">Top</div> 
    <div class="content">Content</div> 
</div>

html,body { 
    height: 100%; 
} 
.wrap { 
    height: 100%; 
    width: 100%; 
    position: relative; 
    overflow: hidden; 
} 
.wrap .top { 
    position: absolute; 
    top: 0px; 
    height: 37px; 
    width: 100%; 
    box-sizing: border-box; 
    border: 1px solid gray; 
} 
.wrap .content { 
    position: absolute; 
    top:37px; 
    bottom: 0px; 
    width: 100%; 
    box-sizing: border-box; 
    border: 1px solid black; 

}

出典

2012-03-21 15:39:49 HerrSerker

ULはどこに行きますか？ –

最初のdivをULに置き換えようとしましたが動作しません。 –

これは概念の証明です – HerrSerker

親コンテナの残りのスペースの100％を使用するようにDIVを設定するにはどうすればよいですか？

答えて

関連する問題