固定divを親コンテナの100％幅に設定します

いくつかのパディングのあるラッパーがあり、次にパーセンテージ幅（40％）のフローティング相対divがあります。

フローティング相対divの中に、親と同じサイズにしたい固定divがあります。固定divがドキュメントのフローから削除されているため、ラッパーのパディングが無視されていることを理解しています。

HTML

<div id="wrapper">
  <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
  </div>
</div>

CSS

body { 
  height: 20000px 
}  
#wrapper {
  padding: 10%;
}  
#wrap { 
  float: left;
  position: relative;
  width: 40%; 
  background: #ccc; 
} 
#fixed { 
  position: fixed;
  width: inherit;
  padding: 0px;
  height: 10px;
  background-color: #333;
}

これが義務的なフィドルです：http：//jsfiddle.net/C93mk/489/

誰かがこれを達成する方法を知っていますか？

混乱して申し訳ありませんが、私が達成しようとしていることの詳細を示すためにフィドルを修正しました： http ：//jsfiddle.net/EVYRE/4/

.wrapperのパディングの代わりに、.wrapコンテナのマージンを使用できます。

body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{ 
    float: left;
    position: relative;
    margin: 10%;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px; 
    height:10px;
    background-color:#333;    
}

jsfiddle

どの程度、この？

$( document ).ready(function() {
    $('#fixed').width($('#wrap').width());
});

jqueryを使用することで、あらゆる種類の幅を設定できます:)

編集：コメントの夢で述べられているように、この効果のためだけにJQueryを使用することは無意味であり、逆効果ですらあります。この例は、ページ上の他のものにJQueryを使用している人々のために作成し、この部分にも使用することを検討しています。ご不便をおかけして申し訳ございません。

親に変換を追加してみて（何もする必要はなく、変換がゼロになる可能性があります）、固定された子の幅を100％に設定します

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 40%; 
    background:#ccc; 
    transform: translate(0, 0);
}
#fixed{ 
    position:fixed;
    width:100%;
    padding:0px;
    height:10px;
    background-color:#333;
}

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

絶対配置を使用して、フッターを親divのベースに固定できます。また、ラップに10pxのpadding-bottomを追加しました（フッターの高さに一致します）。絶対位置は、すでに位置相対属性を指定しているため、フローの外側ではなく、親divを基準にしています。

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    padding-bottom: 10px;
    position: relative;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:absolute;
    width:100%;
    left: 0;
    bottom: 0;
    padding:0px;
    height:10px;
    background-color:#333;

}

http://jsfiddle.net/C93mk/497/

コンテナは親要素の幅の40％です

ただし、position：fixedを使用すると、幅はビューポート（ドキュメント）の幅に基づきます。

考えてみると、親要素には10％のパディング（左と右）があることに気付きました。これは、要素のページ幅全体の80％を意味します。したがって、固定要素は全幅の80％に基づいて40％にする必要があります

したがって、＃fixedクラスを次のように変更する必要があります。

#fixed{ 
    position:fixed;
    width: calc(80% * 0.4);
    height:10px;
    background-color:#333;
}

sass、postcss、または別のcssコンパイラを使用する場合は、変数を使用して、親要素のパディング値を変更するときにレイアウトが壊れないようにすることができます。

これが更新されたフィドルです http://jsfiddle.net/C93mk/2343/

私はそれが役立つことを願っています、よろしく

あなたの最新のの上にjsfiddle、あなただけ一つのことを逃しました：

#sidebar_wrap {
  width:40%;
  height:200px;
  background:green;
  float:right;
}
#sidebar {
  width:inherit;
  margin-top:10px;
  background-color:limegreen;
  position:fixed;
  max-width: 240px; /*This is you missed*/
}

しかし、これはどのようにあなたの問題を解決しますか？簡単です。最初に予想よりも大きい理由を説明しましょう。

固定要素は#sidebar、この要素で定義されると、他のすべての固定要素と同様、独自のサイズを取得するためのベースとしてサイズ幅ウィンドウを使用しますwidth:inheritと、#sidebar_wrap幅の値として40％を持っている、そして計算されますwindow.width * 40%、そして、あなたの窓の幅は、あなたよりも大きいときであれば.container幅は、#sidebarより大きくなり#sidebar_wrapます。

このように、を#sidebar_wrap大きくしないように、にmax-widthを設定する必要があります#sidebar_wrap。

動作するコードを示すこのjsfiddleを確認し、これがどのように機能するかをよりよく説明してください。

パーセントの代わりにpxを削除Padding: 10%;または使用するのために.wrap

例を参照してください：http： //jsfiddle.net/C93mk/493/

HTML：

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

CSS：

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 200px; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px;
    height:10px;
    background-color:#333;

}