CSS Sticky Footer Menu - 检查元素时布局损坏答案

【问题标题】：CSS Sticky Footer Menu - layout broken when Inspecting ElementCSS Sticky Footer Menu - 检查元素时布局损坏
【发布时间】：2011-06-20 12:56:18
【问题描述】：

我制作了一个 CSS 粘性页脚菜单，除了当你使用 FF 检查元素时，它的效果很好，页脚菜单跳了大约 100 像素。因此，当 Firebug 窗口可见时，菜单会在页面的中间浮动！？

我已将 body 和 html 设置为 100% 的高度，并且我还有一个高度为 100% 的容器 div...有什么想法吗？

编辑：我刚刚尝试将容器 div 设置为溢出：自动。菜单不再浮动到页面的一半，但我有垂直滚动条？？

相关CSS：

#menu {
width: 960px;
height: 100px;
position: absolute;
bottom: 0px;
background-color: rgba(65, 64, 64, 0.75);
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

【问题讨论】：

当您使用 Firebug 检查它时，您确定关心它是否仅“中断”？
作为一名网络开发人员，我经常检查其他人网站上的元素......如果它破坏了他们的布局，这会让我有点失望......
如果您：打开您的网站，在自己的窗口中打开 Firebug，然后检查元素，它是否仍然会中断？
不，它没有。一定是Firebug窗口出现在站点底部并向上推菜单
不知何故我以为是这样。在这种情况下，效果应该与不以任何方式使用 Firebug 相同，然后将窗口的高度降低与 Firebug 窗口相同的高度。

标签： html css layout sticky-footer

【解决方案1】：

跨浏览器 CSS 粘性页脚不可能使用单一规则。我敢打赌这在 IE 中不起作用。对于坚如磐石的 css 粘性页脚工具，请查看 here

【讨论】：

是的，这个已经过验证了，我一直在使用它。

【解决方案2】：

您必须考虑到，当 firebug 加载时，它实际上会在其中发布自己的样式以突出显示元素。您可以尝试检查 Chrome/Safari 中的元素，以获得较少侵入性的突出显示。

希望这会有所帮助。

【讨论】：

【解决方案3】：

您应该将菜单放在容器外的

正下方

【讨论】：