0

次のアドレスで開始した Web ページがあります: http://digitalgenesis.com.au/my%20sites/Digital%20Genesis/

基本的には、背景色をフッターまで均等に表示する2つの流動的なコンテナを備えた2列のレイアウトの後です。

ただし、現時点では、左側の列にはテキストの量の背景のみが表示されます。2 つの列とそれに含まれる div のコードを以下に示します。

#container{
 overflow: hidden;
 width: 100%;
}

#col1{
 float: left;
 width: 60%;
 background:red;
}

#col2{
 float: left;
 width:40%;
 background:blue;
}

ページ全体の赤い背景を表示する左の列を取得する方法について困惑しています

簡単にするために、固定幅のサイドバーに頼るべきですか?

4

2 に答える 2

0

jsFiddle のこの例を参照してください。このアプローチは、背景をコンテンツとは別に扱うことで機能します。各列に絶対位置の背景 div を導入します。背景は、パーセンテージを使用してフローティング コンテンツの背後に配置され、親コンテナーの高さを埋めるようにサイズ設定されます。

注:私の例は jsFiddle でホストされていますが、このメソッドには JavaScript は含まれていません。CSS のみを使用します。

于 2010-12-15T06:25:53.377 に答える
0

Faux Columnsは注目に値するテクニックです。

しかし、個人的には JavaScript を使用することにしました。 

$.fn.equalHeights = function(px) {
    $(this).each(function(){ 
            var currentTallest = 0;
            $(this).children().each(function(i){
                    if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
            });
            if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
            // for ie6, set height since min-height isn't supported
            if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
            $(this).children().css({'min-height': currentTallest}); 
    });
    return this;
};

$('.equal-height').equalHeights();

ほとんどの場合、同じ高さの 95% の互換性で十分です。そうでない場合は、偽の列を使用します。ブラウザが追いつくと、この問題は HTML5/CSS3 で完全に解消されるはずです。

于 2010-12-15T06:27:24.380 に答える