Question

我目前有一个页脚使用3列布局，固定中心和流体侧面，以获得漂亮的盒子阴影效果。然而，当窗口太小时，它会将页脚向左推，并将所有内容弄乱。

我似乎无法弄清楚如何确保页脚div不被推开。我的布局一直遇到这个问题。

layout I am working on is here和a screencast showing the problem is here。

Answer 1

最简单的解决方案就是将min-width:980px添加到#container。

#container {
    background: none repeat scroll 0 0 #A8D9A7;
    height: 100%;
    min-height: 100%;
    position: relative;
    z-index: 5;
    min-width: 980px; /* add this */
}

980px数字来自width:960px的{{1}} + padding-left:10px + padding-right:10px。

Answer 2

主页面主体（<div id="body">）的容器元素计算padding-left 10px，第二个容器元素（<div id="content-container">）添加另一个padding-left } 10px，意味着您的主体由20px从左侧填充。

而您的页脚容器（<div id="footer-container">）已计算padding-left的{{1}}。

如果你添加它，它将解决你的问题。 0
修改为上面的解决方案搞砸了底部#footer-container {padding: 0 20px;}。

在box-shadow规则更改：

#footer-left-outer {

为：

margin-right:470px;

在margin-right:-490px;规则更改：

#footer-right-outer {

为：

margin-left:-470px;

在margin-left:-490px;规则更改：

#footer {

为：

padding: 10px 10px 10px 10px; width: 940px;

我现在明白您使用padding: 10px 30px; width: 980px;和outer-right的原因。

我找到了一个不同的解决方案，其中包含部分outer-left效果：
http://jsfiddle.net/nottrobin/Cr4NF/10/

它避免了对box-shadow和footer-left-outer的需要，但我会让你自己决定它是否更整洁。

它使用footer-right-outer仅适用于IE8以上版本：
http://caniuse.com/#search=:before
但是:before在IE中不起作用＆lt; 9无论如何：
http://caniuse.com/#search=box-shadow

如何防止固定宽度元素被推动？

2 个答案: