親divに対する「位置：固定」divの幅を設定します

div（位置：固定）に100％の幅（親divに関連）を与えようとしています。しかし、私はいくつかの問題を抱えています...

編集： 最初の問題は継承を使用して解決されますが、それでも機能しません。問題は、100％/継承幅を取る複数のdivを使用していることだと思います。あなたはjsfiddleアップデートで2番目の問題を見つけることができます：http ://jsfiddle.net/4bGqF/7/

キツネの例

#container {
    width: 800px;
}

#fixed {
    position: fixed;
    width: 100%;
}

とhtml

<div id="container">
    <div id="fixed">Sitename</div>
    <p>
        blaat
    </p>
</div>

または、それを試すことができます：http : //jsfiddle.net/4bGqF/

問題は、固定要素が常にウィンドウ/ドキュメントの幅を使用していることです。誰がどのようにこれを修正するか知っていますか？

私はjScrollPaneプラグインを使用しているため、固定要素に固定を与えることができません。スクロールバーの有無はコンテンツによって異なります。

どうもありがとう！

PS：2つのdivのテキストは互いに重なり合っています。これはほんの一例であるため、それほど重要ではありません。

（編集に基づいて）2番目の問題が何であるかはわかりませんが、width:inheritすべての内側のdivに適用すると、動作します：http : //jsfiddle.net/4bGqF/9/

あなたがサポートする必要があり、サポートしていないブラウザのためのjavascriptソリューションを調べたいかもしれません width:inherit

多くの人がコメントしているように、レスポンシブデザインは非常に頻繁に幅を％で設定します

width:inherit継承するCSSの幅をしないで計算された幅子コンテナの継承を意味します-width:100%

ただし、レスポンシブデザインセットとほぼ同じ頻度で、次のように考えていmax-widthます。

#container {
    width:100%;
    max-width:800px;
}
#contained {
    position:fixed;
    width:inherit;
    max-width:inherit;
}

これは、スティッキーメニューが「スタック」するたびに元の親の幅に制限されるという私の問題を解決するために非常に満足に機能しました

width:100%ビューポートが最大幅より小さい場合、親と子の両方がに準拠します。同様max-width:800pxに、ビューポートの幅が広い場合、両方がに準拠します。

固定の子要素を変更する必要なく親コンテナーを変更できるように、すでにレスポンシブなテーマで機能します-エレガントで柔軟

PS：IE6 / 7を使用しないことは、個人的には問題ないと思います inherit

固定位置は少しトリッキーです（実際には不可能です）が、位置：スティッキーはトリックを美しく実行しています：

<div class='container'>
  <header>This is the header</header>
  <section>
    ... long lorem ipsum
  </section>
</div>

body {
  text-align: center;  
}

.container {
  text-align: left;
  max-width: 30%;
  margin: 0 auto;
}


header {
  line-height: 2rem;
  outline: 1px solid red;
  background: #fff;
  padding: 1rem;

  position: sticky;
  top: 0;
}

codepenサンプルを見る

jQueryで解決することもできます。

var new_width = $('#container').width();
$('#fixed').width(new_width); 

私のレイアウトはレスポンシブであり、inheritソリューションがうまく機能しなかったので、これは私にとってとても役に立ちました！

このCSSを使用します。

#container {
    width: 400px;
    border: 1px solid red;
}

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

#fixed要素は親の幅を継承するため、その100％になります。

固定配置は、ビューポートに関連してすべてを定義することになっているため、position:fixed常にそれを行います。position:relative代わりに子divで使用してみてください。（私はあなたが他の理由で固定配置が必要になるかもしれないことを理解していますが、そうなら-あなたは実際に幅をJSなしで親と一致させることができませんinherit）

以下は、大きなアプリの再描画に関する問題を修正する際に遭遇した小さなハックです。

-webkit-transform: translateZ(0);親に使用します。もちろん、これはChromeに固有のものです。

http://jsfiddle.net/senica/bCQEa/

-webkit-transform: translateZ(0);

これには簡単な解決策があります。

親divの固定位置とコンテンツの最大幅を使用しました。

ブラウザーウィンドウに対して相対的な位置しか固定されていないため、他のコンテナーについてあまり考える必要はありません。

       .fixed{
            width:100%;
            position:fixed;
            height:100px;
            background: red;
        }

        .fixed .content{
            max-width: 500px;
            background:blue;
            margin: 0 auto;
            text-align: center;
            padding: 20px 0;
        }

<div class="fixed">
  <div class="content">
     This is my content
  </div>
</div>

このソリューションは次の基準を満たしています

1. パーセンテージ幅は親で許可されています
2. ウィンドウのサイズ変更後に機能します
3. ヘッダーの下のコンテンツにアクセスできないことはありません

私の知る限りでは、この基準はJavaScriptなしでは満たせません（残念ながら）。

このソリューションはjQueryを使用しますが、バニラJSに簡単に変換することもできます。

function fixedHeader(){
  $(this).width($("#wrapper").width());
  $("#header-filler").height($("#header-fixed").outerHeight());
}

$(window).resize(function() {
  fixedHeader();
});

fixedHeader();

#header-fixed{
  position: fixed;
  background-color: white;
  top: 0;
}
#header-filler{
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="header-fixed">
  This is a nifty header! works even when resizing the window causing a line break
</div>
<div id="header-filler"></div>

[start fluff]<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
[end fluff]

</div>

固定要素とその親要素に同じスタイルを与える必要があります。これらの例の1つは最大幅で作成され、もう1つの例はパディングで作成されます。

* {
  box-sizing: border-box
}
body {
  margin: 0;
}
.container {
  max-width: 500px;
  height: 100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgray;
}
.content {
  max-width: 500px;
  width: 100%;
  position: fixed;
}
h2 {
  border: 1px dotted black;
  padding: 10px;
}
.container-2 {
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  margin-top: 10px;
  background-color: lightgray;
}
.content-2 {
  width: 100%;
  position: fixed;
  left: 0;
  padding-left: 32px;
  padding-right: 32px;
}

<div class="container">
  <div class="content">
    <h2>container with max widths</h2>
  </div>
</div>

<div class="container-2">
  <div class="content-2">
    <div>
      <h2>container with paddings</h2>
    </div>
  </div>
</div>