如何使一个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的高度，并且所有内容都应该自动调整大小。

我相信这是你所问的，请让我知道如果我走错了路！

Answer 2

这是CSS 2没有配备处理的问题，不幸的是。人们使用的标准解决方案是将侧边栏的背景设置为容器上的背景图像，但这并不是很优雅。

唯一干净的解决方案以神奇的形式出现flexbox。以下是如何使用它：

http://www.456bereastreet.com/archive/201103/the_css3_flexible_box_layout_flexbox/

您可以通过Google的许多其他教程。

Answer 3

这可能接近你想要的。

我用display:inline-block;

HTML

<div id="stretched">I span from the left viewport to the right viewport.</div> 

<div id="main" class="center"> 

    <div id="left">Some text</div> 

    <div id="right">I want to be on the right side of the centered content but as tall as the taller between the body tag and the viewport.</div> 


</div> 

CSS

body { 
    padding: 0; 
} 
#stretched { 
    background-color: #ddd; 
    width: 100%; 
} 
.center { 
    margin: 0 auto; 
    width: 300px; 
    height:800px; 
} 
#main { 
    background-color: #bbb; 
} 
#right { 
    background-color: #999; 
    width: 100px; 
    display:inline-block; 
    height:100%; 
} 
#left { 
    width: 195px; 
    display:inline-block; 
    height:100%; 
    vertical-align:top; 
} 

例子：http://jsfiddle.net/jasongennaro/dHerb/3/

Answer 4

如果Ç不使用flexbox，您可以将容器的显示设置为inline。演示请参阅http://codepen.io/tommymarshall/pen/cECyH。