如何摆脱网站两侧的空白区域?重复背景?调整div?我输了

时间:2013-10-19 21:52:56

标签: html css background resize

如何摆脱网站两侧的空白区域?

我希望背景能够灵活适应浏览器窗口的大小。我想我需要调整div容器的大小,但是我遇到了很多麻烦。

http://www.dropshiplounge.com/

2 个答案:

答案 0 :(得分:0)

您的网站使用固定宽度和边距构建,使用css中的此规则将其与页面中间对齐。

margin:0 auto;

您网站中的所有内容都已根据您的包装宽度规范进行构建。大多数响应式网站仍然具有页面包装和最大宽度。如果这是困扰的白色空间设置身体元素的背景

body{background:color;}

或图片

body{background-image:url('background_image_url')}

虽然我不是W3C的最大粉丝,但如果您遇到问题,请参阅此信息以获取更多信息 - http://www.w3schools.com/css/css_background.asp

如果您担心自己的网站没有响应不同的屏幕尺寸和浏览器大小调整,请考虑聘请专业人士重新设计您的网站以进行响应式设计。

答案 1 :(得分:0)

这个fiddle或多或少是你想要的吗?

我删除了global_container_上的硬编码宽度,并在标题上设置了width: 100%;,并为repeat-x背景设置了header。我从float: left;及其子元素中删除了header,并确保子元素的左边距和右边距为auto。我还从headline删除了硬编码宽度,但是如果你想要全宽度,你还必须将bottomline移到它的容器之外(或者删除硬编码的宽度)来自容器)。

此外,我认为我不必在小提琴中更改此内容,但您可能需要从clearfix中删除global_container_类,或者按顺序将其设置为display: block;使全宽度生效。

footer的想法是相同的 - 将其设置为width: 100%;并调整页脚和子元素的填充和边距,直到它们放在您想要的位置。