这是做项目时会遇到的经典布局问题，首先交代下背景，然后给出一个具体的解决方案。 背景：一个高度固定的导航栏始终固定在视口的顶部，下面是一个高度固定的盒子，再下面是主要内容，它的高度会变化，但它有一个最小高度，且多数情况下都处于这个最小高度，页面还有一个底部。我们希望：滚动条不要出现在导航栏，且多数情况下页面不会出现滚动条，及所有内容都出现在视口上。下面是个简单的示意图。 我们先给出html的代码结构：

这样做的目的是让html占满整个视口，与此同时，y方向超出的话就隐藏

我们需要注意的是,fixed定位的元素要指定宽高，top和left的值默认为0，但最好还是指定一下。如果我们想要这个导航栏随浏览器窗口缩放进行适配，那就要根据导航栏内部的内容进行规定，当宽度小于多少时，把某些内容隐藏或者折叠起来。因为进行fixed定位的元素宽度若超出视口宽度，超出部分就会被隐藏，不会随页面的宽度滚动条出现

这个容器高度的百分比是针对于父级的，也就是我们的body，我们让它margin-top: 80px避开了导航栏，然后让它的高度占满剩下的全部。如果内容超出这个高度就会自动产生滚动条。这样滚动条就不会出现在导航栏上了。

我们为了让底部大多数情况下都恰好固定在视口底部，给它设置一个min-height，是用它父级的高度（100%）减去上面固定的高度和底部的高度。

OK,Over! 通常情况下，浏览器自带的滚动条都特别丑，想要好看的滚动条请移步关于滚条的选择器。