web-dev-qa-db-ja.com

親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のテキストは互いに重なり合っています。これは単なる例であるため、実際には問題ではありません。

jquerycssjquery-plugins
110
Dnns

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

サポートする必要があるブラウザとwidth:inheritをサポートしていないブラウザ向けのJavaScriptソリューションを検討することをお勧めします。

107
jeroen

多くの人がコメントしているように、レスポンシブデザインでは幅を％

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を使用しないことは個人的には重要ではないと思います

19
aequalsb

このCSSを使用します。

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

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

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

11
banrobert

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

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

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

10
user3173364

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

7
Thomas Shields

大規模なアプリでの再描画の問題を修正する際に遭遇した小さなハックを次に示します。

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

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

-webkit-transform: translateZ(0);
2
Senica Gonzalez

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

<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サンプルを参照

1
Multicam

これが私が使ったトリックです。

例えば。私はこのHTMLを持っていました：

<div class="head">
    <div id="fx">123</div>
</div>

.head内で#fxを固定するため、回避策は、次のようにposition：absoluteを使用して#fxのコンテナとして追加のdivを追加することです。

<div class="head">
    <div class="area_for_fix">
        <div id="fx">123</div>
    </div>
</div>

CSSは次のとおりです。

.head {
    min-width:960px;
    width:960px;
    nax-width:1400px;
    height:300px;
    border: 1px solid #000;
    position:relative;
    margin:0 auto;
    margin-top:50px;
    padding:20px;
    text-align:right;
    height:1500px;
}

.area_for_fix {
    position:absolute;
    right:0;
    width:150px;
    height:200px;
    background-color:red;
}

#fx {
    width:150px;
    height:75px;
    background-color:#ccc;
    position:fixed;
}

重要：#fxにtopおよびleftを設定しない場合は、.area_for_fixにこれらの属性を設定します。

1
Evgeniy

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

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

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

このソリューションではjQueryを使用していますが、Vanilla 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>
0
Skeets

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

親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>
0
Sab Devadasan