Question

我希望固定页面高度不滚动，标题固定在顶部，填充中心到页面的其余部分。当内容溢出时，中心区域将拥有自己的滚动条。

我为中央div设置了100％的高度，但是这个高度≠顶部和底部块之间的高度自由空间。

我该怎么办？非常感谢！

Look code on jsfiddle

Answer 1

在中心div周围添加一个包装div。将其设置为全屏并填充：

height: 100%;
width: 100%;
padding-top: 150px; /* size of your header */
padding-bottom: 100px; /* size of your footer */

在你的中心div上设置溢出：

overflow: auto

overflow属性会隐藏额外内容，并为您的div添加滚动条。

你的标题将包含：

height: 150px; /* your desired size */
position: fixed; /* or absolute */
top: 0px;

你的页脚会有：

height: 100px; /* your desired size */
position: fixed; /* or absolute */
bottom: 0px;

然后你有一个＆＃34;全屏＆＃34;应用程序（在这种情况下是全窗口）

Answer 2

html,body {height:100%; }
* { padding: 0; margin: 0; }
body { border:1px solid blue;  }

#head {background-color:#FC6; height:50px;position:fixed;top:0px;width:100%;}
#center {background-color:#3CC; height:100%;margin:49px 0px; }
#foot {background-color:#9C0; height:50px;position:fixed;bottom:0px;width:100%;}

小提琴：http://jsfiddle.net/9xrz9mbf/4/

Answer 3

我创造了一个js小提琴，我用我从你的问题中理解的要点创造了这个小提琴。我使用jquery $( window ).height()来获取浏览器视口高度。通过从浏览器视口高度减去页眉和页脚的高度（50px + 50px = 100px），我将获得额外空间的高度。此高度将等于内容高度。

检查小提琴 http://jsfiddle.net/bnx4uuse/1/

如何制作固定页面模板？

3 个答案: