html - ネストされた Div がコンテナー Div にうまく収まらない

Question

別のコンテナー div (panelContainer) 内に作成される dojox チャート (chartDiv) があります。

chartDiv の幅と高さを 90% に設定しても、chartDiv にスクロールバーが導入されるか、ChartDiv のパディングとマージンの設定を変更すると、親コンテナーの外にこぼれます。

これが基本的な問題になることはわかっていますが、さまざまな CSS 設定で遊んでいますが、chartDiv を panelContainer の範囲内に保持する (スペースの 95% を占める) ことを解決するものは何もないようです。

ここに画像の説明を入力

このフィドルは、私が間違っている場所を見つけるのに役立つかもしれません。

score 1 · Accepted Answer

幅/高さのないチャート (または dojox.gfx キャンバス) を作成すると、配置したコンテナーからその寸法を決定するために最善を尽くします。ただし、混乱する可能性があります。

あなたのフィドルの場合、#chart はブロック要素であり、panelContainer の幅の 100% である panelBG からその幅を継承するため、既知の幅を持っています。

#chart div には実際には高さがありません。ブロック要素は、何かを配置する (またはスタイルを追加する) まで高さが 0px であるためです。結果として、(私が思うに) グラフは単純に幅に比例した高さを前提としています。

あなたの CSS には、幅と高さが 90% の #chartDiv ルールがあることがわかります。#chart にするつもりだったと思います。しかし、それは実際には問題を完全に解決したわけではありません!

それを変更したと仮定すると、グラフは幅/高さとして 90%x90% を使用するようになりますが、試してみると、ラベル/軸がまだ正しく配置されていないことがわかります。

タイトルコンテナーを左にフロートさせたので、チャートコンテナーは同じ "行" から開始し、そのコンテンツをタイトルコンテナーの周りに "フロート" させようとします。これにより、軸ラベルがずれて (緑)、実際のグラフ (svg/canvas、ピンク) はタイトルコンテナーの下にドロップされます。

浮きます

これを修正するには、チャートコンテナに両側のフロートを避けるように指示します。

#chart {
    width: 90%;
    height: 90%;
    clear: both;
}

ただし、何もフロートする必要はありません。また、高さを 90% に設定することが常に理想的であるとは限りません。更新されたフィドルで提案を行いました: http://fiddle.jshell.net/froden/WsrHs/4/。

違いは、タイトルコンテナーが上部にまたがる div であるのに対し、チャートコンテナーは絶対配置されているため、下に残っているスペースを埋めることだけです。その後、panelContainer で幅/高さを設定できます。

score 0 · Accepted Answer

絶対配置要素は、通常の流れから除外されます。これが、一部の要素がそのコンテナを超えて拡張されている理由です。あなたのフロートもそれに関与していると感じていますが、フィドルは少し複雑すぎて、より単純なバージョンを作成する必要があります.

2 に答える 2