web-dev-qa-db-ja.com

100％DIV幅は実際には100％ではありません

<div>にwidth: 100%がある場合、実際には100％ではありません。

<div id="div">testtesttesttesttest</div>

...

#div {
  width: 100%;
  background-color: red;
}

ウィンドウのサイズを変更すると、水平スクロールバーがあり、右にスクロールすると、背景が消えます。この場合、どうすればバックグラウンドを維持できますか？

ここで実際の問題を見ることができます： http://beta.ovoweb.net/?i=

これで、ウィンドウのサイズを変更して右にスクロールすると、背景が表示されなくなります。これを修正する方法は？

csshtmlscrollwidth
23
www.data-blogger.com

100％値は、親の幅またはビューポートの100％です。 ドキュメント を参照してください。

19
James Sumners

幅：100％は、そのマージンと、親（あなたの場合はボディ）のマージンとパディングの影響を大きく受けます。最初にリセットしてください

何かのようなもの

body {
    margin: 0;
    padding: 0;
}
#div {
  margin: 0;
  width: 100%;
  background-color: red;
}

[〜＃〜] demo [〜＃〜]

17
Starx

これをcssに追加します。

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}

その後、動作するはずです。

4
Arda

100％は、親コンテナーに基づいて、使用可能な幅の100％のみです。したがって、幅500ピクセルのDIVを作成し、幅100％で別のDIVを内側にネストすると、100％DIVは最大500ピクセルまで拡張できます（パディングまたはマージンをカウントしないため、0にリセットする必要があります）。

2
Dan

これを行う必要があります（CSSファイルの一番上にこの行を追加します）：

* { margin: 0; padding: 0; }

私のために常に動作します。

2
shane

ほとんどの場合、CSSに コードのこのビット を追加します。それもあなたのために働くはずです。はい、100％の幅または高さは常に親コンテナに基づきます。

[〜＃〜] css [〜＃〜]

*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
}


#container{
width:100%;
height:100%;
background:gray;
position:relative;
display:block;
}
#content{
height:50px;
width:50px;
bottom:20px;
right:10%;
background:red;
position:absolute;
}

[〜＃〜] html [〜＃〜]

<div id="container">
    <div id="content">
    </div>
</div>​

[〜＃〜] output [〜＃〜]

enter image description here

1
GaurabDahal

私の場合、divタグは親タグの100％を占めませんでした。divには「インライン」と表示されていたからです。 「インラインブロック」に変更すると、その問題が修正されました。

0
James in Indy