在两个固定的div元素之间创建一个滚动div [英] Create a scrolling div between two fixed div elements

问题描述

我是一个新的定位divs我想要他们在一个网站，所以我希望有人可以在这里帮助。我想要得到的是一个三明治类型设置与滚动内容在两个div。这样我有一个标题div和一个页脚div，这两个都必须保持静态的页面。然后，在他们之间，我必须有一个内容div填充两个固定div之间的空间，并有能力滚动自己。我怎么去建立这样简单的东西？或者这不是很简单吗？

I'm kind of new to positioning divs how I want them in a website, so I hope someone can help here. What I'm trying to get is a sandwich-type set up with a scrolling content in the middle of two divs. Such that I have a header div and a footer div, both of which have to stay static on the page. Then, between them, I have to have a content div that fills the space between the two fixed divs and have the ability to scroll on it's own. How would I go about building something simple like this? Or is this not simple at all?

更新：我创建了一个小提琴，我认为是ALMOST我想要的。我有页面和页脚在页面上保持静态。但是，我不得不欺骗主div的顶部边缘，使其内容从标题后面开始。我唯一仍然有的问题是，内容的结尾被页脚底部截断。我需要查看整个内容。

Update: I created a fiddle that I think is ALMOST what I want. I have the header and footer staying static on the page. However, I'm having to trick the top margin of the main div so that it's content starts right after the header. The only problem I still have, really, is that the end of the content is being cut off at the bottom by the footer. I need to see the entire content.

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

谢谢！

推荐答案

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

Simply set the height of the consecutive elements to equal 100% and set your content DIV to scroll on the Y-axis:

<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/

这篇关于在两个固定的div元素之间创建一个滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！