css 100%宽度div不占据父级的整个宽度

发布于 2024-12-01 08:18:04 字数 1375 浏览 1 评论 0原文

我在一个页面上有两个 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 的背景图像仅填充窗口，而不是 html 的整个宽度。其症状是，如果缩小浏览器窗口以便需要水平滚动条并刷新页面，则背景图像会在浏览器窗口结束的地方结束。当我向右滚动时，背景图像不存在。有想法吗？

编辑：好的，根据请求，我已经编辑了我的 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>

原文

I have two divs on a page. a grid-container that takes a background and an internal grid that needs to be positioned in the center of the other grid. My 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;
}

At this point, the bg image of the #grid-container only fills the window, not the full width of the html. The symptom of this is that if you narrow the browser window so that a horizontal scrollbar is required and refresh the page, the bg image ends where the browser window ends. When I scroll to the right, the bg image is not there. Ideas?

EDIT: ok, per requests, I've edited my css/html. When I remove the width designation in the #grid-container, it shrinks to the width of the container within, which is even worse. Here's what I have now:

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

and the html:

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

枯叶蝶 2024-12-08 08:18:04

该问题是由您的 #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;
}

The problem is caused by your #grid having a width:1140px.

You need to set a min-width:1140px on the body.

This will stop the body from getting smaller than the #grid. Remove width:100% as block level elements take up the available width by default. Live example: 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;
}

回复收藏 0 原文