如何使div标签跨越页面的高度

Question

如果我不清楚,我不知道如何问这个如此原谅我,请让我澄清一下.我想将页面居中,并在居中内容的右侧有一个"侧栏",而不是视口的右侧.这很简单,除了我希望元素和视口一样高.但是,如果身体标签较高,我希望它与身体标签一样高.我需要这个,因为侧边栏的背景必须沿y轴重复以覆盖整个视口.我可能没有解释任何事情,所以也许这个jsFiddle将清除任何错过的细节.

http://jsfiddle.net/dHerb/

我可以将.center样式设置为静态的位置值,但是然后绝对定位被抛弃.我可以将侧边栏浮动到右侧,但高度不会填满页面.我可以使用JavaScript,但不应依赖JavaScript进行布局,因为依赖它的元素是页面内容的四分之一.

任何指针都将非常感激.

编辑:更改正文和html标记高度为100%有帮助,但它仍然没有像我描述的那样表现.如果视口中有内容并且您滚动到该内容,则不会重复背景.

Answer 1

将所有内容放在容器div中.所以,例如:

<div id="container" style="width:960px;">
    <div id="content" style="width:800px; height:100%; float:left;">
            Your Content
    </div>
    <div id="sidebar" style="width:160px; height:100%; float:left;">
            Your sidebar
    </div>
</div>

注意:为了清楚起见,我在这里使用了内联样式元素,将它们放在外部样式表中.

这将导致内容和侧边栏始终与页面的整个高度匹配.如果需要,您可以手动设置容器div的高度,并且所有内容都应自动调整大小.

我相信这就是你的要求,如果我走错了路,请告诉我!