CSS+DIV レイアウト、一方の列の幅は他方の列の幅に依存し、合計幅が適応型になります (CSS+DIV レイアウト、一方の列の幅は他方の列の幅に依存します)_html/css_WEB-ITnose

お客様は、2 列の DIV+CSS レイアウトを使用したいと言いました。ナビゲーション列の幅は不確実で (内部の TreeView コントロールによって決定されます)、それに平行するコンテンツ列の幅は適応的である必要があります。つまり、

コンテンツ列幅 + ナビゲーション列幅 == 固定値 (合計幅)

ただし、コンテンツ列幅もナビゲーション列幅も固定値がなく、ほとんどのアダプティブ列幅コードはインターネット上の は固定値に基づいています

どうしようもない、私は Winform 出身で CSS+DIV についてはほとんど知らないので、JavaScript を介してのみ実行できます。IE7.0 と Firefox2 では効果は悪くありません。 0 件のテストに合格しました

次のコードでは、ナビゲーション列には幅が定義されておらず、実際の幅は内部のコンテンツによって異なります:

レンダリングでは、ナビゲーション列は右側にあります (慣れていません、笑) 、顧客はアラビア語です):

タイトル >

window.onload = function (){
document.getElementById( " left " ).style.width = ( 773 - (document.getElementById( " right " ).clientWidth)) + " px " ;
}

本文
{
背景 : #999 ;
text-align : center ;
カラー: #333 ;
フォントファミリー: Verdana、Arial、Helvetica、サンセリフ;
マージン: 0px ;
}
#header
{
margin-right : auto ;
マージン左 : 自動 ;
パディング: 0px ;
幅: 776px ;
背景: #EEE ;
高さ: 60ピクセル;
text-align : 左 ;
}
#contain
{
margin-left : auto ;
margin-right : 自動 ;
幅: 776px ;
}
#mainbg
{
float : 左 ;
パディング: 0px ;
幅: 776px ;
背景: #60A179 ;
}
#right
{
float : right ;
マージン: 2px 0px 2px 0px ;
パディング: 0px ;
背景: #ccd2de ;
最小高さ: 300px ;
_高さ: 300ピクセル;
text-align : 左 ;
}
#left
{
float : right ;
マージン: 2px 2px 0px 0px ;
            パディング: 0px ;
背景: #F2F3F7 ;
幅: 574px ;
最小高さ: 600px ;
_高さ: 600ピクセル;
text-align : 左 ;
}
#footer
{
clear : 両方 ;
margin-right : 自動 ;
マージン左 : 自動 ;
パディング: 0px ;
幅: 776px ;
背景: #EEE ;
高さ: 60ピクセル;
}
.text
{
マージン : 0px ;
パディング: 20px ;
}



ヘッダー 高さ 60px





ここにツリーを置きます



この div の 幅 は 右 div に依存します
left
左
左
左







また、以前のオリジナルのコードは私が収集したもので、オンライン上にコピーがたくさんあるようです。元のソースがどこにあるのかはわかりませんが、拡張および変更されています。あなたがオリジナルの作者である場合は、blodfox777@hotmal .com


までご連絡ください。