0

私はある種のウィンドウを作成していますposition:absolute;。

ここjsbinで見られるように、「ウィンドウ」にはタイトルバーとその内容があります。

<div class="l">
<div class="t">
<h4>Title</h4>
</div>
<div class="x">
    <!--contents-->
</div>
</div>

私のスタイルは次のとおりです。

div.l{position:absolute;background:#aaf;width:70%;height:200px;padding:1em;}
div.t{padding:1px;background:#af9;}
div.x{padding:1em;background:#a87;height:100%;overflow:auto;}

私が問題を抱えているのは、divxが利用可能なすべてのスペースを占有overflow:auto;してスクロール可能な領域に入れることです。

divlには明確なサイズがあるので、それに適用overflow:auto;してスクロール可能な領域を設定できますが、タイトル全体、、div.tもスクロールします。ここを参照してください。

下部のパディングxまで残りのスペースを埋めるためにdivが必要なので、それを使用できます。1emoverflow:auto;

div.x絶対に配置せずにこれを行う方法はありますか？または少なくとも？の高さを知らずにdiv.t？

4

2 に答える 2

0

これは、の高さを設定した場合にのみ可能になると思いますdiv.t。サンプルは次のとおりです：http：//jsfiddle.net/gmncc/

于 2012-05-28T00:50:27.083 に答える
0

答えがノーであることが今ではかなり明らかだと思いますdiv.x。残りの高さを埋めることはできません。

たぶんCSS3フレックスボックスはこれを達成することができますが、それは私がそれを尋ねたときの質問の範囲外であり、おそらく別の質問に属しています。

于 2013-11-02T16:13:19.900 に答える