今日、社内ライブラリを使用して Web アプリケーションのポップアップを作成する状況に遭遇しました。私の場合、このポップアップにはテキスト付きの単一の段落が含まれており、このテキストの量については何も推測できません。
このポップアップ用にこのライブラリによって生成された を調べたところ、html
ネストされた要素がいくつかありdiv
、最下位レベルにはdiv
for ヘッダー、ボディ、フッターがあります。
ポップアップ オブジェクトを作成する関数へのパラメーターの 1 つとして、ボディ パーツのハードコーディングされた幅と高さを (json オブジェクトとして) 渡すことができますが、何も渡されない場合は、このオプションに限定されます。 body には高さ/幅を指定することしかできません (現時点では、直接スタイリングのために他のパラメーターを渡すことはできません)。
div
私は自分の段落を自分がアクセスできる独自の段落に入れることで、この問題を回避したいと考えていました。
ここでの問題は、テキストが外側の div よりも多くのスペースを占めているdiv
場合、外側のdiv
サイズは同じままで、テキストがポップアップから「漏れている」ように見えることです。
私はこのようなもので試しました(overflow:auto
インナーのスタイルに追加div
)
<div class="popup-body" style="width: 450px; height: 460px">
<div class="my-content-div" style="overflow:auto>
//text in paragraph
</div>
</div>
で使用するmy-content-div
height:inherit
か、必要height: 100%
な結果を得ることができる場合height:inherit
、それは IE7 でサポートされていないため使用できず (また、アプリケーションはバージョン 7 以降の IE をサポートする必要があります)、高さをパーセントで指定することはできません。 、のようにheight:100%
(なぜこれができないのか今は思い出せませんが、これがわかったらここに書きます)。
したがって、基本的には、内側の div の高さを外側の div の高さと同じにしたいだけです。
height:inherit
それで、私が言及したもの(または)とは別に、height:100%
私が望むことを達成できる他の方法はありますか?