CSS固定页眉页脚

Question

在网上搜索解决方案3天后，我认为我没有问自己的问题......

我想设计一个固定标题为50px的页面，一个30px的固定页脚，它始终位于屏幕的底部，无论正文的内容如何，​​左侧的导航树视图可能是滚动，如果内容超出页面适合的范围，以及使用屏幕其余部分的主要内容区域。

我希望使用纯css和div语句编写。

Answer 1

你不应该要求别人为你做功课。在寻求代码帮助之前，至少尝试自己编程并进行大量研究。如果你真的无法自己解决问题，只能寻求帮助。

无论如何，您的问题的答案在于标题：fixed。

I made this really quick for you

在不久的将来使用此示例，并在不久的将来使用此建议。

Answer 2

尝试使用calc函数，这会让您的生活更轻松。有很多方法可以做你想要的，其中一种方法是使用完美的尺寸。

.header {
  width: 100%;
  height: 50px;
}

.footer {
  width: 100%;
  height: 30px;
}

.main{
  width: 100%;
  height: calc(100% - 80px);
  overflow: auto;
}

http://jsfiddle.net/c7b4emfb/

这应该让你开始。但是，你应该谷歌更多。了解position，float和display的工作方式，您不应该遇到任何问题。