Html 如何使div标签跨越页面的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7004851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a div tag span the height of the page
提问by Tyler Crompton
I don't know how to ask this so pardon me if I am unclear and please ask me to clarify. I want to center a page and have a "side bar" on the right within the centered content, not the right of the viewport. This is pretty simple except I want the element to be as tall as the viewport. However, if the body tag is taller, I want it to be as tall as the body tag. I need this because the sidebar has a background that must repeat along the y-axis to cover the entire viewport. I probably didn't explain anything so perhaps this jsFiddle will clear up any missed details.
我不知道如何问这个，所以如果我不清楚，请原谅我，请让我澄清。我想将页面居中并在居中内容的右侧而不是视口的右侧有一个“侧栏”。这很简单，只是我希望元素与视口一样高。但是，如果 body 标签更高，我希望它与 body 标签一样高。我需要这个是因为侧边栏的背景必须沿着 y 轴重复以覆盖整个视口。我可能没有解释任何东西，所以这个 jsFiddle 可能会清除任何遗漏的细节。
I can set the .centerstyle to have a position value of static which works but then the absolute positioning is thrown off. I could float the sidebar to the right but the height won't fill the page. I could use JavaScript, but JavaScript shouldn't be relied on for layout especially since the element that depends on it is a quarter of the page's content.
我可以将.center样式设置为具有 static 的位置值，该值可以工作，但是绝对定位被丢弃。我可以将侧边栏向右浮动，但高度不会填满页面。我可以使用 JavaScript，但不应该依赖 JavaScript 进行布局，尤其是因为依赖它的元素是页面内容的四分之一。
Any pointer will be much appreciated.
任何指针将不胜感激。
EDIT: Changing the body and html tag to have a height of 100% helps but it still doesn't quite behave as I described. If there is content out of the viewport and you scroll to that content, the background won't repeat.
编辑：将 body 和 html 标签更改为 100% 的高度有帮助，但它仍然不像我描述的那样表现。如果视口外有内容并且您滚动到该内容，则背景不会重复。
采纳答案by Terrik
Put everything inside of a container div. So, for example:
将所有内容放在容器 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>
Note: I used inline style elements here for clarity in the sample code, place them in your external style sheet.
注意：为了在示例代码中清晰起见，我在这里使用了内联样式元素，将它们放在您的外部样式表中。
This will cause the content and the sidebar to always match the full height of the page. If you need to, you can manually set the height of the container div and everything should size automatically.
这将导致内容和侧边栏始终与页面的全高匹配。如果需要，您可以手动设置容器 div 的高度，所有内容都应自动调整大小。
I believe this is what you were asking, please let me know if I went down the wrong path!
我相信这就是你要问的，如果我走错了路，请告诉我！
回答by Dude
I would recommend using the following CSS:
我建议使用以下 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);
}
The HTML part would be:
HTML 部分将是：
<div class="overlay">
Add some content over here if you want to display something like a popup
</div>
I used the above code to display an overlay with a popup in it. Why I did not use height : 100%is because after using that, the overlay was not showing in a specific case where the height of parent div was not specified. Refer to this question.
我使用上面的代码来显示一个带有弹出窗口的叠加层。为什么我没有使用height : 100%是因为使用它之后，在未指定父 div 高度的特定情况下，叠加层没有显示。参考这个问题。
回答by Jason Gennaro
This might be close to what you want.
这可能接近你想要的。
I used display:inline-block;
我用了 display:inline-block;
HTML
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
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;
}
回答by tommymarshall
If you can't use flexbox you can set the container's display to inline. See http://codepen.io/tommymarshall/pen/cECyHfor demo.
如果您不能使用 flexbox，您可以将容器的显示设置为inline. 有关演示，请参阅http://codepen.io/tommymarshall/pen/cECyH。
回答by Yorb
This is a problem that CSS 2 is not equipped to handle, sadly. The standard solution people use is to make the background of the sidebar a background image on the container, but that's not really very elegant.
遗憾的是，这是 CSS 2 无法处理的问题。人们使用的标准解决方案是使侧边栏的背景成为容器上的背景图像，但这并不是很优雅。
The only clean solution comes in the form of the magical flexbox. Here's how to use it:
唯一干净的解决方案是神奇的flexbox形式。以下是如何使用它：
http://www.456bereastreet.com/archive/201103/the_css3_flexible_box_layout_flexbox/
http://www.456bereasttreet.com/archive/201103/the_css3_flexible_box_layout_flexbox/
You can find many other tutorials via The Googles.
您可以通过 Google 找到许多其他教程。
