css - ブラウザの幅に合わせた柔軟なレイアウト

Question

3列のレイアウトがあります。左右のdiv幅をピクセル単位で固定する必要があり、中央のdivはブラウザの幅に基づいて拡張する必要があります。

参照画像

灰色と赤のdivの幅はピクセル単位で固定されているため、これら2つは常にブラウザに対して左右になり、緑のdivはブラウザの幅に基づいて拡張されるため、幅を持たないようにする必要があります。

これが私がこれまでに試したデモですhttp://jsfiddle.net/JvHZ7/

Answer 1

このjqueryを試してください

var left = $(".left").width();
var right = $(".right").width();
var main = $(".wrapper").width();
var setwidth = main - right - left;
$('.center').css("width", setwidth);

ここにデモ：フィドル

これがお役に立てば幸いです。

Answer 2

あなたはこれをチェックすることができます：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は必要ありません。

Answer 3

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*/
}

Answer 4

表示：テーブル; IE7では互換性がありません。

jqueryを使用する場合は、次のようにします。

var thisWidth = ($(window).width()) - 220 - 140;
$('.center').css("width", thisWidth);​

高さ：100％にも注意してください。周囲のdivで高さを固定するためには機能しません。