0

サイド カラム (リマインダーなど) と、各ページのコンテンツが表示される中央のカラムとのインターフェイスが必要です。

私は2つの列が彼らのレベルに等しくなり、私ができることを持っています. 問題の右側の列は、壁紙の 3 つのセクションで構成されています。高さが固定された上部と下部があります。中段は内容によって高さが異なります。

私の問題は、中間セクションが高さに一致し、最終的にすべてが2番目の列と同じ高さの列になる必要があることです。

スクリプトでやってみました。問題は、jquery animate 関数列を使用すると、高さ Banmtzih が追加されず、小さなジャンプが作成されることです。

これを行う方法はありますか？

私のコード:

<div class="main_content">
    <div id="area_right">
        <div id="area_right_top">
            <div id="area_right_bottom">
                <div id="area_right_content">
                    My content..
                </div>
            </div>
        </div>
    <div>

    <div id="area_left">
        <div id="area_left_top">
            <div id="area_left_bottom">
                 <div id="area_left_content">
                    My left content
                 </div>
            </div>
        </div>
    </div>
</div>

プレビュー:プレビュー

ありがとう！

4

2 に答える 2

1

cssスタイル シートを使用し、このトリックを使用するには、以下のように部門の別の階層的な実施形態を使用することをお勧めします。

<div class="main_content">
    <div id="area_right">
        <div class="wrarper">
            <!-- 100% height and margin-bottom -XXXpx throught CSS-->
            <div id="area_right_top"><!-- determined height throught CSS-->
            </div>
                    My content..
            <div class="push"></div><!-- height:XXXpx throught CSS-->
        </div>
        <div id="area_right_bottom"><!-- height:XXXpx throught CSS-->
        </div>
    <div>
    ect ect     
</div>

検索エンジンで「CSS スティッキー フッター」を検索してみてください。

于 2012-08-22T07:36:07.033 に答える
0

実際には、jsなしでこれを達成するためのトリックがあります。これは、私の意見では常にプラスです。私は説明しようとします：

  • 提供した画像全体を 3 つの部分にスライスします。固定された上部と下部の部分、および反復可能な 1 ピクセルの高さの中央部分です。
  • 次のように html を構成します。

​&lt;div id="page-wrap"/>
    <div id="top-bg"></div>
    <div id="content">
        <div id="left">
            ...
        </div>
        <div id="right">
            ...
        </div>
        <div style="clear: both;"><!-- clearfix --></div>
    </div>
    <div id="bottom-bg"></div>     
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

  • 次に、背景画像をtop-bgとbottom-bgに繰り返しのない画像として適用し、寸法を固定に設定します
  • 中央の画像をコンテンツ div に適用し、y 軸に沿って繰り返すように設定します
  • 左右の列をフロートさせ、上と下に負のマージンを与えて、上と下のdivの上を流れるようにします

これでうまくいくはずです。これで、左右どちらが大きくても、コンテンツ全体が伸びます。また、背景をラッパーに設定することで、最小の列が伸びているように見えますが、必要な高さしか占有しません。

これは私の控えめな説明から理解するのが少し難しいことを知っているので、明確にするために小さな例を設定します: http://jsfiddle.net/jczXV/

于 2012-08-22T09:46:08.417 に答える