87

パディングのあるラッパーがあり、次にパーセンテージ幅 (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/

4

7 に答える 7

2

これはどうですか？

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

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

編集: コメントの夢で述べたように、この効果のためだけに JQuery を使用することは無意味であり、非生産的ですらあります。この例は、ページの他のものに JQuery を使用し、この部分にも使用することを検討している人々のために作成しました。ご迷惑をおかけしましたことをお詫び申し上げます。

于 2013-07-23T09:58:15.527 に答える
1

絶対配置を使用して、フッターを親 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/

于 2013-07-23T11:15:14.513 に答える
1

あなたのコンテナは親要素の幅の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/

お役に立てば幸いです、よろしく

于 2016-12-01T17:50:57.443 に答える
-3

パーセントの代わりに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;

}
于 2013-07-23T10:01:12.340 に答える