0

親divから抜け出そうとしているので、ブラウザの幅をカラーdivで覆うことができます。

ただし、何らかの理由でブロックが左に押し出されます。

これは私のサイトです。

これは私のコードです:

HTML:

<div class="aboutTop"></div>

CSS:

.aboutTop{
   width: 100%;
   height: 600px;
   background-color: black;
   margin-left: -100%;
   margin-right: -100%;
}

どこが間違っていますか？

4

5 に答える 5

1

親からdivを「ブレイクアウト」するには、使用する必要がありますposition: relative;

HTML:

<div class="aboutTop">
    <div>break out!</div>
</div>​

CSS:

div
{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}

.aboutTop div
{
    position: relative;
    top: 50px; 
    left: 50px;
}

これは、子要素が親の境界に制限されているためです。配置を使用すると、要素がドキュメント フローから除外されます。相対位置を使用すると、フローから外れますが、親内の元の位置が基準点として使用されます。絶対値は、ブラウザー ウィンドウの左上隅を参照として使用します。:)

http://jsfiddle.net/qkU7F/

幅は常に親 div を参照します。したがって、jQuery を使用して、ウィンドウの幅に基づいて要素の幅を設定できます。

var winWidth = window.innerWidth;

$('.aboutTop div').css("width", winWidth);

http://jsfiddle.net/qkU7F/3/

于 2012-10-03T08:41:44.867 に答える
0 
.aboutTop{
   position:fixed;
   width: 100%;
   height: 600px;
   background-color: black;
   margin-left: -100%;
   margin-right: -100%;
}

配置せずに幅100％を指定すると、親分割に対して100％かかります。固定するか、親区分の幅を変更する必要があります。

あなたが書くコードは、最初からあなたが達成したいことを目的としている必要があります。このような場合は、幅の狭い親除算を使用しないでください。

相対ポジショニングを使用する場合、またはマージンが負の絶対位置を使用する場合でも、幅は親の分割の100％になります。達成するには、幅を110％程度に増やす必要があります。

于 2012-10-03T08:46:05.710 に答える
0

これで：

margin-left: -100%;
margin-right: -100%;

パーセンテージは、親要素に相対的です。

したがって、親要素の幅が 200px の場合、100% は 200px になります。

ブラウザの幅全体に何かを広げたい場合は、いくつかのオプションがあります。

絶対位置を使用し、left:0; right:0;

要素を body 要素の直接の子にし、その幅を 100% に設定します

于 2012-10-03T08:41:32.930 に答える
0

あなたは設定していますwidth: 100%が、margin-left: -100%. これは、要素が -100% から 0 に及ぶことを意味します。

設定もしているのでmargin-right: -100%、-100% から +200% の範囲にしたいようです。つまり、width: 300%代わりに設定する必要があります。

于 2016-12-06T09:41:55.763 に答える
0

div #site のパディングを削除した方がよいと思います。ブラウザの全幅にします。

次に、必要に応じて子 div にパディングを適用します。

于 2012-10-03T09:11:48.280 に答える