css親の全幅を占めていない100％幅div

ページに2つのdivがあります。バックグラウンドをとるグリッドコンテナと、他のグリッドの中心に配置する必要がある内部グリッド。私のCSS：この時点でcss親の全幅を占めていない100％幅div

html, body{ 
    margin:0; 
    padding:0; 
    width:100%; 
} 
#grid-container{ 
    background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left; 
    width:100%; 
} 
#grid{ 
    width:1140px; 
    margin:0px auto; 
}

は、＃グリッドコンテナのBGの画像はウィンドウのみ、HTMLのない全幅を埋めます。この現象は、水平スクロールバーが必要となるようにブラウザウィンドウを絞り込み、ページを更新すると、bgイメージがブラウザウィンドウの終了位置で終了するという現象があります。私が右にスクロールすると、bgイメージはそこにありません。アイデア？

EDIT：ok、リクエストごとに、私は自分のcss/htmlを編集しました。＃グリッドコンテナで幅指定を削除すると、コンテナの幅に収縮しますが、これはさらに悪化します。ここで私は今持っているものです。

html, body{ 
    margin:0; 
    padding:0; 
    min-width:1140px; 
} 
body{ 
    background:url(../images/page-background.jpg) repeat-x top left !important; 
    height:100%; 
} 
#grid-container{ 
    background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left; 
    padding-top:1px; 
} 
#grid-container2{ 
    width:1140px; 
    margin:0px auto; 
} 
.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
}

とhtml：

<!DOCTYPE HTML> 
<html> 
<head> 
--- 
</head> 

<body> 
... 
<div id="grid-container" class="clearfix"> 
<div id="grid">..all kinds of things in here</div> 
</div>

出典

2011-08-24 panzhuli

HTMLを追加できますか？ –

これは論理的です。ブラウザの幅をブラウザの100％に設定するようブラウザに指示します。 – Luuk

幅を削除する：100％それはトリックを行う必要があります。 http://www.impressivewebs.com/width-100-percent-css/ –

この問題は#gridにwidth:1140pxが含まれていることが原因で発生しています。

bodyにmin-width:1140pxを設定する必要があります。

これで、より小さくなることがなくなります。bodyは、#gridより小さくなります。ブロックレベル要素はデフォルトで利用可能な幅を占めるため、width:100%を削除します。実例：http://jsfiddle.net/tw16/LX8R3/

html, body{ 
    margin:0; 
    padding:0; 
    min-width: 1140px; /* this is the important part*/ 
} 
#grid-container{ 
    background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left; 
} 
#grid{ 
    width:1140px; 
    margin:0px auto; 
}

出典

2011-08-24 15:12:07 tw16

になっていても、＃grid-containerにはまだ幅：100％が必要でした。理由は分かりませんが、そこに行きます。ありがとう！ – panzhuli

"幅を削除：ブロックレベルの要素がデフォルトで利用可能な幅を占めるため、100％を削除します。" - 私が探していた説得に感謝します。 –

はwidth:100%;宣言を削除します。

ブロック要素は、デフォルトで利用可能な幅全体を占める必要があります。

出典

2011-08-24 15:04:23 Geert

本当に、ありがとう！何らかの理由で – RynoRn

html, body{ 
    width:100%; 
}

これは、htmlが100％幅であることを示します。しかし、100％はブラウザウィンドウの幅全体を指しているので、それ以上ではありません。

代わりに、最小幅を設定することができます。

html, body{ 
    min-width:100%; 
}

最小100％、必要に応じてさらに100％になります。

出典

2011-08-24 15:04:33

css親の全幅を占めていない100％幅div

答えて

関連する問題