我正在尝试设计一个单页网站（没有垂直和水平滚动）。现在我的结构是：
container-->height: 100%
header-->height: 10%
main-content-->height: 80%
footer-->height: 10%
该页面在 Mozilla Firefox 中完全符合我的要求。
但是，在 Chrome 中，页脚底部和浏览器底部之间会出现一个黑色空间（大约 1-2px）。
在 Safari 中，右侧会出现一个垂直滚动条。
我在 windows 上工作并且没有对任何元素应用任何边距/填充{顶部或底部}。
编辑#1
我还在 main-content 中使用了一个滑块，为此我必须为某些 div 指定固定高度。
【问题讨论】：
标签： html css google-chrome firefox safari
底部或滚动条出现黑色空间的可能原因是浏览器使用百分比计算的方式。你可以找到解释Here。
诀窍是在容器外定义#footer 并设置
#footer{
position: absolute;
bottom: 0;
width: 100%;
height: 9%;
}
并且还将#header的高度设置为9%，以便在计算中考虑到偶然性。
【讨论】：
您提到“主要内容”的高度应为 80%（这与两个 10% 的值相加很好），但在您的代码（HTML 或 CSS）中，您实际上没有指定 80%。
我可以在“main-content”中看到的是一堆嵌套的 DIV，所有这些 DIV 都指定了固定像素高度，所以我不确定这是如何工作的。
首先将height: 80%;添加到#main-content，去掉嵌套在#main-content中的所有DIV的所有固定高度，然后确定下一步需要做什么。
编辑：您提到您的代码在 FireFox 中工作，但我唯一能想到的是它可以在 FireFox 窗口的确切像素大小下工作，并且没有其他尺寸。如果您调整 FireFox 窗口的大小，它看起来还可以吗？
【讨论】：
javascript，当我调整窗口大小时它会自行调整。此外，fixed 高度用于我正在使用的滑块。除非它们在px 中具有固定高度，否则它将不起作用。也许，这就是原因。
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, big, strike, strong, sub, sup, tt, var,
b, u, i, center,table, tr, td, th, tbody, thead, tfooter,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; border-spacing: 0; }
将此用作重置，它应该可以工作
【讨论】：
欢迎来到 Web 开发的世界。我建议从 CSS 重置开始，以确保布局一致。如果您不喜欢使用 Yahoo 的工具，CSS reset 的 Google 是一个不错的起点。
雅虎提供了方便的工具：http://developer.yahoo.com/yui/reset/。
基础的 YUI 重置 CSS 文件删除并中和了 HTML元素的默认样式不一致，创建了一个级别 跨 A 级浏览器的竞争环境并提供良好的基础 您可以在其上明确声明您的意图。
<!-- Source File -->
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
【讨论】：