我的CSS类页脚的背景不能跨浏览器的整个宽度取决于我有多宽保持浏览器去。 它正在使页面看起来很奇怪,因为主要内容结束之前的页脚结束。 该网站在avidest.com到了,所以你可以看到我指的是。 这里是CSS:
.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9; background-repeat: top-repeat-x;}
CSS的最初:
.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9;}
但没有任何工作。 如何使页脚一路从左边到浏览器的右侧?
谢谢。
寻找与Chrome检查您的网页,这个错误似乎与浮动所有列和头有关。
当你漂浮的元素,即元素获得“出”的公文流转。 这意味着该元素的实际大小不会”考虑到当它的时间来布置的东西。
我通常不希望有浮动元素这种行为,所以要避免这种情况的一种方法是设置overflow: auto
在父容器。
此外,你的头布局看起来真的很奇怪。 当我有一个明确的解决办法,我会更新这个。
首先更新:我已经加入说overflow: auto
与浮动元素每一个家长,现在它为我工作。 请该规则添加到以下因素:
.Header
.Logo
.body
请注意,这些变化网页会显得凌乱(具体而言,将是各地的滚动条)。
这是因为你已经有点过于严格设置的东西大小。 我将让事情流动更加自然,而不是。 例如:
- 设置标志的大小不应该是neccessary。
- 在头要点太少高度。 我也将其删除。
我会做的另一件事是在3(或2至少,报头和内容),以分割的背景图像。 这样一来,事情多一点解耦,更容易改变。 尝试认为每个“逻辑”块(页眉,页脚,边栏,登录表单),其不应与其他人共享的东西(图像,类等),一个独立的模块的。
对不起,这一切都不能在注释中解释,但请不要犹豫,问我什么。
你是否尝试过左,右的像素为0,也许?
.Footer { left:0px; right:0px; padding-bottom:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9; background-repeat: top-repeat-x;}
我想这可能是它内部的容器