Question

我对divs的定位方式有点新意，所以我希望有人可以在这里提供帮助。我想要的是一个夹心式设置，在两个div的中间滚动内容。这样我有一个标题div和一个页脚div，两者都必须在页面上保持静态。然后，在它们之间，我必须有一个内容div填充两个固定div之间的空间，并具有自己滚动的能力。我将如何构建这样简单的东西？或者这根本不简单？

更新：我创造了一个小提琴，我认为几乎是我想要的。我的页眉和页脚在页面上保持静态。但是，我必须欺骗主div的上边距，以便它的内容在标题之后开始。我仍然唯一的问题是，内容的结尾是由页脚底部切断的。我需要看到整个内容。

小提琴：http://jsfiddle.net/fgskS/18/

谢谢！

Answer 1

只需将连续元素的高度设置为100％，并将内容DIV设置为在Y轴上滚动：

<header>
    <h1>Sandwich Layout</h1>
</header>
<div id="main" role="main">

</div>
<footer>
    Footer stuff here
</footer>

html,
body { height: 100%; margin: 0; padding: 0; } /* This is important */

header,
footer { background: #ccc; height:20%; }

#main { height: 60%; overflow-y:scroll; }

小提琴：http://jsfiddle.net/kboucher/3E8Gg/

Answer 2

如果您将页眉和页脚div设置为固定，您可以为您的内容制作一个主div，它将按您希望的方式滚动。

在两个固定的div元素之间创建一个滚动div

2 个答案: