3列のレイアウトがあります。左右のdiv幅をピクセル単位で固定する必要があり、中央のdivはブラウザの幅に基づいて拡張する必要があります。
参照画像
灰色と赤のdivの幅はピクセル単位で固定されているため、これら2つは常にブラウザに対して左右になり、緑のdivはブラウザの幅に基づいて拡張されるため、幅を持たないようにする必要があります。
これが私がこれまでに試したデモですhttp://jsfiddle.net/JvHZ7/
3列のレイアウトがあります。左右のdiv幅をピクセル単位で固定する必要があり、中央のdivはブラウザの幅に基づいて拡張する必要があります。
参照画像
灰色と赤のdivの幅はピクセル単位で固定されているため、これら2つは常にブラウザに対して左右になり、緑のdivはブラウザの幅に基づいて拡張されるため、幅を持たないようにする必要があります。
これが私がこれまでに試したデモですhttp://jsfiddle.net/JvHZ7/
このjqueryを試してください
var left = $(".left").width();
var right = $(".right").width();
var main = $(".wrapper").width();
var setwidth = main - right - left;
$('.center').css("width", setwidth);
ここにデモ:フィドル
これがお役に立てば幸いです。
あなたはこれをチェックすることができます:http://jsfiddle.net/SHnc9/1/
この手法はネガティブカラムと呼ばれ、IE7以下をサポートする必要がある場合に使用されます。
このHTMLを検討してください。
<div class = "container">
<div class = "fixed first">
I'm the first fixed
</div>
<div class = "fluid">
I'm fluid!
</div>
<div class = "fixed last">
I'm the last fixed
</div>
</div>
およびCSS
html, body {
height: 100%;
font-family: 'Arial', 'Helvetica', Sans-Serif;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.container > div {
text-align: center;
float:left;
}
.fixed {
background: rgb(34, 177, 77);
color: white;
width:150px;
position:relative;
}
.fluid {
background: rgb(0, 162, 232);
float:left;
width:100%;
margin-left:-150px;
margin-right:-150px;
}
この方法はクロスブラウザであり、ハックやJavaScriptは必要ありません。
CSSテーブルを使用できます。これがデモです:小さなリンク。基本的なアウトラインは次のようになります。HTML:
<div class = "container">
<div class = "fixed">
I'm 150px wide! Glee is awesome!
</div>
<div class = "fluid">
I'm fluid! Glee is awesome!
</div>
<div class = "fixed">
I'm 150px wide! Glee is awesome!
</div>
</div>
CSS:
html, body {
height: 100%;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.container > div {
display: table-cell;
}
.fixed {
width: 150px; /*or whatever you want*/
}
.fluid {
/*yep, nothing*/
}
表示:テーブル; IE7では互換性がありません。
jqueryを使用する場合は、次のようにします。
var thisWidth = ($(window).width()) - 220 - 140;
$('.center').css("width", thisWidth);
高さ:100%にも注意してください。周囲のdivで高さを固定するためには機能しません。