0

画面の両側に 1 つずつ、メイン コンテンツ エリアに 1 つずつ、計 2 つのツールバーがあります。哀れな原因で横スクロールしなければならないことを望んでいないので、誰かがセットアップを手伝ってくれるかどうかを調べようとしていました。

私の現在の試みは：

 $("#main").css("width", window.outerWidth - $("#t1").width() - $("#t2").width());

問題は、マージンのためにまだ大きすぎることです。幅を行う代わりに、ウィンドウと同様にouterWidthを行う必要がありますか、それともそれを行うjqueryコマンドがありますか?

ありがとう

これは基本的なフィドルです。設定は異なりますが、アイデアはそこにあります。私はそれを行う方法について確信が持てません。 http://jsfiddle.net/fallenreaper/DfZx7/

私のフィドルをどんどんいじくり回すと、私が与えた例でそれを理解したと確信しています。 私のコードに同じことを適用できるかどうかを確認しながら、derpスタンバイ。

サンプルは私のコードでは動作しませんでしたが、境界線はメインと属性の両方で 2px に設定されていました。8 ピクセルを差し引くと解決します。

4

2 に答える 2

1

スクロールバーを避けるために JavaScript は必要ありません。これは、2 つの固定幅列とリキッド 1 つのレイアウト幅です。

レスポンシブな方法でのレイアウトの「スケルトン」は次のとおりです。

<div id="window">
    <div id="column-sx"></div>
    <div id="main"></div>
    <div id="column-dx"></div>
</div>​

CSS:

#window {
    width:100%;
    overflow:hidden;
}
#column-sx {
    width:54px;
    float:left;
}
#column-dx {
    width: 140px;
    float:right;
}
#main {
    width:100%;
    float:left;
    margin-right:-194px; /* left + right col width */
}
#main > * {
    margin-right:194px; /* left + right col width */
}

このようにして、「壊れる」ことも、水平スクロールバーが発生することもありません。

とにかく、おそらくmin-width#main コンテンツ用に を設定し、コンテンツ用に別のコンテナを追加することをお勧めします。> *

コードを修正してこのフィドルを確認してください

于 2012-09-22T08:42:30.280 に答える
0

私の頭の上から、outerWidthが機能すると思います。そうでない場合は、属性を介してマージン値を見つけることができますが、それは.style理想的ではありません。

幅を動的に設定し、水平スクロールが本当に嫌いな場合は、ウィンドウのサイズ変更に注意する必要があります。上記の関数を関数$().resize()内に配置して、幅が常にウィンドウ内に収まるようにし、これを css で補完して、min-width小さくなりすぎないようにすることもできます。

于 2012-09-21T16:40:11.133 に答える