4

私はこの単純なレイアウトをしたいと思います：

  1. 左と右の位置を持つ 3 列: 下にスクロールすると、左と右が静止しているため、修正されました。
  2. 私たちは左の列を知っていますwidth = 200px
  3. 中段を知るwidth = 400px
  4. 右の列幅がわからないため、流動的である必要があります（つまり、画面幅の残りを埋めるかゼロにする）

これは私が持っているサンプルです（ただし、col3 の幅は 100pxです）。問題は、css をcol3流動的にするために修正する方法ですが、まだ予約していposition:fixedますか?

http://jsfiddle.net/Endt7/1/

私の最後の選択肢は、jQuery を使用することです。しかし、レイアウトに本当に必要でない限り、私はそれに触れたくありません。

ありがとう。

4

2 に答える 2

2

絶対/固定配置要素の場合、幅は左右の関数です。したがって、left: 600px; right: 0;3 番目の列に を設定すると、ブラウザーが幅を決定します。それだ。一貫性を保つためにいくつかの変更を加えた、改訂された CSS を次に示します。

.col1 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 200px;
    background: red;
}
.col2 {
    margin-left: 200px;
    width: 400px;
    height: 100%;
    background: green;
}
.col3 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 600px;
    right: 0;
    background: blue;
}

デモはこちら

于 2013-01-01T07:59:38.197 に答える
0

float:left左列と中央列の絶対位置を使用して実行しmargin-left、それらを組み合わせた幅に等しく設定できます。

.col1 {
    background: red;
    float:left;
    width: 200px;    
    height:100%
}

.col2 {
    background: green;    
    float:left;
    width: 400px;
    height:100%

}

.col3 {
    background: blue;
    margin-left:600px;

}

デモ: http://jsfiddle.net/Endt7/3/

于 2013-01-01T07:46:47.787 に答える