web-dev-qa-db-ja.com

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

1ページに2つのdivがあります。背景と、他のグリッドの中央に配置する必要がある内部グリッドを取得するグリッドコンテナ。私のCSS：

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;
}

この時点で、＃grid-containerのbgイメージはウィンドウ全体に表示され、htmlの幅全体には表示されません。この症状は、水平スクロールバーが必要になるようにブラウザウィンドウを狭めてページを更新すると、ブラウザウィンドウが終了する場所でbgイメージが終了することです。右にスクロールすると、bgイメージがそこにありません。アイデア？

編集：OK、リクエストごとに、css/htmlを編集しました。 ＃grid-containerで幅の指定を削除すると、内部のコンテナーの幅に縮小されますが、これはさらに悪いことです。私が今持っているものは次のとおりです。

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>
csshtml5width
29
panzhuli

この問題は、#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;
}
27
tw16
html, body{ 
  width:100%;
}

これにより、htmlの幅が100％になります。ただし、100％はブラウザウィンドウの幅全体を指すので、それ以上になりません。

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

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

そのため、最低でも100％になり、必要に応じてボットを増やします。

9
Jose Faeti

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

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

6
Geert