logo标签列表

如何使一个 div 标签占据整个页面的高度

htmlcssviewport
5
我不知道如何表达，如果我不清楚，请让我澄清。我想居中一个页面，并在居中的内容内右侧有一个“侧边栏”，而不是视口的右侧。这很简单，但我希望该元素与视口一样高。然而，如果body标签更高，我希望它与body标签一样高。我需要这样做是因为侧边栏具有必须沿y轴重复以覆盖整个视口的背景。我可能没有解释清楚，所以也许这个jsFiddle会澄清任何遗漏的细节。

http://jsfiddle.net/dHerb/

我可以将.center样式的position属性设置为static，这样可以正常工作，但是绝对定位会失效。我可以将侧边栏向右浮动，但高度无法填充页面。我可以使用JavaScript，但布局不应该依赖于JavaScript，尤其是依赖于页面四分之一的元素。

非常感谢任何指针。

编辑：将body和html标签的高度设置为100％有所帮助，但它仍然无法完全按照我描述的行为。如果视口外有内容并且您滚动到该内容，则背景不会重复。

1
你能画一个简单的线框草图吗？你需要研究的一件事是 [CSS display] 和 [CSS position]；span 具有 display:inline，而 div 具有 display:block，在位置方面，你可以将其相对于容器元素进行定位。请发送一些图片。 - Pramendra Gupta
1
这与span标签无关。你看了jsFiddle吗？我解释清楚了需要的一切吗？ - Tyler Crompton
5个回答
4
将所有内容放入一个容器div中。例如：
```html
// 在这里添加所有的内容
```
<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的高度，一切都应该自动调整大小。
我认为这就是你所问的内容，请告诉我是否走错了方向！
在这个例子中，#container 的高度取决于 #content 和 #sidebar 中较大的高度，因为我必须对 #container 进行绝对定位。 - Tyler Crompton
3
我建议使用以下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部分应该是：

HTML部分会包括：

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

我使用上面的代码显示一个带有弹出窗口的覆盖层。 我之所以没有使用 height : 100% 是因为在父 div 的高度未指定的情况下，覆盖层不会显示。可以参考 这个问题。

那肯定可以，但我认为在我发布问题的时候vh单位还不存在。感谢您分享一个更现代的解决方案。 - Tyler Crompton
感谢您点赞这个答案。 :) - Dude
1
这可能接近你所需要的。 我使用了"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/

我考虑过这样做，但唯一的问题是样式表是针对整个网站的，因此#left和#right元素中内容的长度是未知的。此外，如果可用高度大于800像素怎么办？它仍然无法填充视口。 - Tyler Crompton
1
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接