3

私はこのようなものを持っています:

<body>
    <div style="width:700px; margin:0 auto;">
        <div class="inner-div"></div>
    </div>
</body>

クラス「inner-div」で子divをボディ幅の100%に拡張する方法はありますか?

4

8 に答える 8

7

これによりinner-div、左から右にストレッチが行われます。

div.inner-div {
  position: absolute;
  left: 0;
  width: 100%;
}
于 2012-07-13T14:14:54.543 に答える
1

cssだけではありません。親に 700px を設定したため、子はこれを継承します。しかし、これは JavaScript で行うことができます。ここでjqueryを使用します：

$(window).bind("load resize", function(){
  $('.inner-div').width($('body').width());
});

ウィンドウのサイズを変更しても機能します。

于 2012-07-13T14:18:41.527 に答える
1

私はこれをテストしていませんが、うまくいくかもしれません：

これには jQuery が必要です。

//I'm using a resize event in case the body with changes. At least i think that will work.
window.onresize = function(event) {
    var bWidth = $("body").width():
    $(".inner-div").width(bWidth);
}
于 2012-07-13T14:14:59.323 に答える
0

inner-div に width 100% を指定すると、outer div の幅に収まります。

于 2012-07-13T14:16:19.010 に答える
0

CSSでそれを行う方法の小さな例なので、私が推測する属性を設定するJavaScriptでも同じです：http://jsfiddle.net/u8mJW/。

于 2012-07-13T14:16:51.190 に答える
0

純粋な CSS でこれを機能させるには、すべての親要素が必要ですposition:static; (または static がデフォルトであるため、position 属性なし)。

その後、ステファンのコードを使用できます

div.inner-div {
  position: absolute;
  left: 0;
  width: 100%;
}

(Ricola3D の Fiddle を修正: http://jsfiddle.net/u8mJW/23/ )

于 2013-07-10T12:08:56.463 に答える