CSS 高度 % 和 Px

Question

我正在设计一个整页网站，该网站将主要使用 javascript（尤其是 ajax）提供支持。现在，我正在研究基本结构等。

我见过几个目标相似的问题，但没有一个真正有帮助。也许我误解了，或者什么。我不知道。无论如何，我的目标是创建一个页面，该页面完全占用用户浏览器提供的空间量，而侧面或顶部没有空白空间。这意味着我的结构必须依赖基于百分比的测量。

问题是，两个关键元素之一是以像素为单位的特定大小。再大一点，就会有空余的空间被浪费掉。任何更小，我的网站的标志将不适合。看看我的代码：

HTML

[nav]The Beef[/nav]

[footer]The Cream Filling[/footer]

CSS

html, body{height: 100%; margin: 0; overflow: hidden; padding: 0; position: relative; width: 100%; z-index: 0;}

nav{display: block; height: 100%; position: absolute; width: 100%; z-index: 1;}

footer{bottom: 0; display: block; height: 170px; position: absolute; width: 100%; z-index: 2;}

问题是，现在整页导航（正如我提到的，由 javascript 驱动的网站）继续在页脚“下方”。我想要它做的是占用页脚未使用的所有空间，而不会将页面扩展到用户屏幕的容量之外（IE，没有滚动条）。

我宁愿不为此使用 javascript，但如果绝对没有其他选择，我愿意这样做。

Answer 1

为什么不指定内容块的底部位置：

bottom:   170px;