位置：固定と幅：親を継承する

Question

私は固定要素をの割合の親（ここでは#container）にしようとしています。パーセンテージの代わりにピクセルを使用すると効果があります。どうしたらいいですか？ CSSでこれは可能ですか？

HTML

<div id="outer"> 
    <div id="container"> 
    <div id="fixed"> 
     Sitename 
    </div>    
    </div> 
</div> 

CSS

#outer{ 
    width:300px; 
    border: 1px solid yellow; 
} 

#container { 
    width: 90%; /*When I use e.g 250 px it works. But I need it in percentage*/ 
    border: 1px solid red; 
    height: 300px; 
} 

#fixed { 
    position: fixed; 
    width: inherit; 
    border: 1px solid green; 
} 

JSFiddle

追加：

私はposition:fixedが必要です。私はこのようなページの一番下に置きたいから：position:relativと

JSFiddle

ソリューションは、私のために動作しません。

Answer 1

「固定」の幅を100％に設定して、位置（相対位置）を固定の代わりに指定します。 http://jsfiddle.net/J7yE4/

#fixed { 
    position: relative; 
    width: 100%; 
    border: 1px solid green; 
} 

Answer 2

あなたは幅として#outerを持っている：継承し、ポジション：、300ピクセル、90％の手段270pxとして#containerを、今あなたが幅を与えていることがブラウザに曖昧である固定なので、位置を使用：幅で固定：x％for＃fixed

Answer 3

静的な値（250px）は通常の継承を通じて伝播できるようです。相対値（90％）が使用されている場合、fixed divはすでにフローから外れていますが、現在は継承されていますが、親はビューポートです。あなたには良い古いjsを使わなければならないと私には思われます。

しかし、この質問は今何ヶ月も経っているので、おそらくどちらの場合でも問題はありません。

Answer 4

継承された値は、相対値（絶対値など）から絶対値の値に「変換」されるという信念があります。何だと思う？それは間違っています。ここでMDNはそれについて言っているのです：

inherit CSS-値は、それが に指定された要素は、その親要素からプロパティの計算値を取る原因となります。

[...]

典型的相対値を変換することを含むプロパティ ために計算された値に到達するのに必要な計算絶対値に（例えばem units又はpercentagesにおけるものなど）。たとえば、要素の値がfont-size: 16pxとpadding-top: 2emの場合、padding-topの計算値は32px（フォントサイズの2倍）です。

しかし、いくつかの特性（例えばwidthとしてパーセンテージが決定するレイアウトを必要とし得る ものに対するものであるもの、 margin-right、text-indent、及びtop）のために、パーセント指定された値は、パーセンテージ計算された値に を回します。 [...]これらの相対値は、の値がのときに絶対値になります。今

---

例。我々は次のような構造を持っているとしましょう：

<div id="alpha"> 
    <div id="bravo"> 
    <div id="charlie"></div> 
    </div> 
</div> 

...と、次のCSS：

#alpha { outline: 1px solid red; width: 420px; height: 100px; } 
#bravo { outline: 1px solid green; width: 50%; height: inherit; margin: 0 auto; } 
#charlie { outline: 1px solid navy; width: inherit; height: inherit; margin: 0 auto; } 

...あなたはこの絵が表示されます：

。 .. #charlie要素の高さが#bravoの親要素と同じであるが、その幅はその親の50％であることを意味する。継承値の計算値は、高さが100px、幅が50%です。

---

この機能が良いか悪いかもしれませんが、状況に応じて、非固定要素のために、それは間違いなく、固定のものを傷つけているように見えます。 widthの値が50%の値がそのまま継承されているため、そのディメンションのused valueはビューポートに基づいています。 calc(50%)など、percentage-usingの値と同じです。