4

固定要素の幅を、そのすぐ下に配置された div の幅と一致させたいと思います。ヘッダーとメイン コンテンツの div を想像してください。ヘッダー div とコンテンツ div が外側の div 内にネストされている場合、それらの幅を一致させる際に問題が発生します。このシナリオでは、それぞれの % 幅が親の幅 (<body>タグなど) と一致しなくなり、固定要素の幅は、私を混乱させる何かに基づいています。

私の言いたいことをよりよく説明するために、次の 2 つの js フィドルを比較してみましょう。

  1. http://jsfiddle.net/2dudX/4/
    vs.
  2. http://jsfiddle.net/2dudX/10/

それぞれのコードは次のとおりです。

<div id="fixed"></div>
<div id="content"></div>​

#fixed{ position:fixed; z-index:2; width:90%;
        height:25px; background:yellow;}
#content{ width:90%; height:300px; background:red}

対。 

<div id="main">
   <div id="fixed"></div>
   <div id="content"></div>    
</div > 

#main{ width:95%}
#fixed{ position:fixed; z-index:2; width:90%;
        height:25px; background:yellow;}
#content{ width:90%; height:300px; background:red}

jsfiddle #1 でのみ、ブラウザーのサイズ変更に関係なく、黄色と赤の div の幅が一致することに注意してください。残念ながら、jsfiddle#2 はより現実的なシナリオでありid="fixed"、幅も div と一致するように divを修正する方法を考えていますid="content"。

考え？

4

2 に答える 2

5

この方法でFIDDLE (#main に対して % を設定する) 固定要素の寸法は常にルート要素に対して計算されるため、%設定する必要があるこの特定のケースではそれに応じて -unitをリセットする必要があります。

#fixed {
    width: 85.5%;
}

ケース#mainは 95% で、静的要素はメインに対して 90% です。したがって、ルート要素に向かって幅を計算する必要があります ( 1* .95* .9= .855)

于 2012-08-25T02:54:19.217 に答える
4

簡単な私の友人。固定幅の要素は親からヤンクされ、幅がウィンドウに対して相対的になりました。そのため、どちらの状況でも、固定 div は常にウィンドウのサイズに対して相対的ですが、幅が 100% 以外の親コンテナーでは、固定要素はウィンドウの幅に対して相対的なままですが、位置が固定されていない要素は親の幅に対して相対的になります。したがって、非固定要素はウィンドウの 95% の 90% になり、固定要素はウィンドウの 90% のみで一定のままでした。

編集：

幅を一致させたい場合は、次のように jquery を使用できます。

$(function(){
    $('#fixed').width($('#content').outerWidth());
});
于 2012-08-25T02:57:52.933 に答える