Question

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

http://jsfiddle.net/dHerb/

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

非常感谢任何指针。

编辑：将body和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：

.overlay {
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100vh;
    text-align: center;
    background-color: rgba(0,0,0,0.3);
}

HTML部分为：

<div class="overlay">
    Add some content over here if you want to display something like a popup
</div>

我使用上面的代码显示了一个带有弹出窗口的叠加层。我之所以不使用 height：100％的原因是，使用后，在未指定父级div高度的特定情况下，该覆盖图没有显示。 Refer to this question。

Answer 3

遗憾的是，这是CSS 2无法处理的问题。人们使用的标准解决方案是使侧边栏的背景成为容器上的背景图像，但这并不是非常优雅。

唯一干净的解决方案是魔法flexbox的形式。以下是如何使用它：

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

您可以通过The Googles找到许多其他教程。

Answer 4

这可能接近你想要的。

我使用了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 5

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

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

5 个答案: