7

セットアップ

シンプルな 2 カラム レイアウトの Web サイトを作成しています。列はさまざまな高さ (一方が他方よりも高い) と動的な高さ (各ページのコンテンツは異なります) になります。2 つの列の背景色は、最も長い列のコンテンツの最下点まで拡張する必要があります。

あなたの中の視覚的な学習者のために、CSS-Tricks にはいくつかの素敵なイラストがあります

ここに画像の説明を入力

ここに画像の説明を入力

試み

同じ CSS-Tricks ページの半分ほど下に記載されているOne True Layout Methodを使用しています。

jsFiddle here で再作成しました。

ここに関連するコーディングがあります

HTML

<a href="#area1">Go To Section 1</a>
<a href="#area2">Go To Section 2</a>
<a href="#area3">Go To Section 3</a>

<div id="hold">
    <div id="col1">
        Content Column 1
    </div>
    <div id="col2">
        Content Column 2

        <h2 id="area1">Section 1</h2>
        <img src="http://placehold.it/100x750" alt=" placehold img" />

        <h2 id="area2">Section 2</h2>
        <img src="http://placehold.it/100x750" alt=" placehold img" />

        <h2 id="area3">Section 3</h2>
        <img src="http://placehold.it/100x750" alt=" placehold img" />
    </div>
</div>

CSS

#hold{
    height:100%;
    overflow-y:hidden;
}
#col1, #col2{
    padding-bottom:100000px;
    margin-bottom:-100000px;
}
#col1{
    float:left;
    width:200px;
}
#col2{
    margin-left:200px;
}

何が機能しますか?

レイアウトは完全に期待どおりに機能します。列の高さは動的コンテンツに適応し、常に互いに同じ高さを保ちます。

問題

アンカーはそれを壊します。つまり、ページはコンテンツ内の適切なアンカーまでスクロールダウンしますが、アンカーより上にあるものはすべて非表示になります。これが原因であることがわかりましたoverflow-y:hidden;-ページがコンテンツまでスクロールダウンしており、スクロールバーを使用する代わりに、スクロールするだけでなく、上記のコンテンツを非表示にしています。無効overflow:hiddenにすると、すべてのコンテンツが期待どおりに表示されますが、下部のパディングが大きいため、これは理想的ではありません。

他の人がこの同じ問題を経験しており、私が見つけることができる認識された解決策はありません。

可能な解決策

JavaScript で簡単な高さチェックをまとめて、それに応じて各列を設定することもできますが、サイト全体のレイアウト JS を自由に保ちたいと思っています。

一部の記事では絶対配置が固定されていると述べていましたが、これは動的コンテンツでは機能しません。

別の列の高さの方法に変更します。でも…でも…でも、これはもう持ってる！そして、不可能で困難なコーディングの課題に単純に屈服するのは誰ですか.. :)

援助要請

アイデアはありますか、仲間のプログラマー?

4

2 に答える 2

2

ブラウザを騙していますが、副作用があります (アンカーが壊れます)。最善の解決策は、列の高さを調整する別の方法を見つけることですが、その領域では、とにかく私よりも多くの調査を行ったようです。

あなたの質問のパラメータを考えると（JavaScriptをデザインに使用したくないようで、列を修正するために使用する方法を本当に変更したくないようです）、それに到達できる最も近いものはcss をデザインに使用し、JavaScript を使用してアンカーを修正します。

このスニペットはあなたのために働くはずです

var isScrollFix = false;
document.getElementById('hold').addEventListener('scroll',function(e){
        if(!isScrollFix) {//dont copy our own scroll event onto document
              isScrollFix = true;
              var scrollTo = this.scrollTop;
              this.scrollTop = 0;
              window.scroll(0, scrollTo);
         } else {
              isScrollFix = false;
         }
});

または、他の状況にも対応するための少し余分なコードを含むjsfiddleでhttp://jsfiddle.net/joshK/P72LV/5/

于 2013-02-12T15:52:20.773 に答える
2

必ずしもIE7のサポートを気にする必要はないことを示したので、他のテクニックの1つ（質問で参照したCSSトリックリンクにもあります）を使用して、ディスプレイを使用できます：テーブルとテーブルセル。

これにより、動的コンテンツに関係なく同じ高さの列が得られますが、ページ内アンカーをクリックした後、コンテンツを完全に非表示にすることなく上にスクロールすることもできます。

私はレイアウト目的で目に見えないテーブルを使用することを本当に軽蔑しますが、この場合、DIV 表示属性値を変更するだけで追加の DOM 要素を強制することはありません。

#hold{
    width:100%;
    background:#ccc;
    height:100%;
    display: table;
}
#col1, #col2{
    display: table-cell;
}
#col1{
    width:200px;
    background:#00c;
}
#col2{
    background:#c00;
}
于 2013-02-12T16:49:59.450 に答える