我网页左侧有一个导航栏，希望它可以延伸到页面高度的100%。这里指的不仅是浏览器视窗的高度，还包括在滚动后才能看见的那些区域。请注意：我不想使用JavaScript来完成这个功能。
是否可以用HTML/CSS实现此功能？
是否可以用HTML/CSS实现此功能？
15个回答
191
当使用一个div作为动态背景的容器时，以下是我最终提出的解决方案：
- 对于非背景用途，请移除
z-index。 - 对于全高度列，请移除
left或right。 - 对于全宽度行，请移除
top或bottom。
编辑1: 由于在FF和Chrome中未正确显示，因此下面的CSS已进行了编辑。将position:relative移到HTML上，并将body设置为height:100%而不是min-height:100%。
编辑2: 添加了CSS的额外注释。在上面添加了一些更多的说明。
CSS如下：
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}
这段代码：
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>
为什么？
html{min-height:100%;position:relative;}
如果没有这个属性，云容器（cloud-container）将从HTML的布局上下文中移除。position: relative 保证了在绘制时云容器仍然在HTML盒子内部，以便 bottom:0 指的是HTML盒子底部。你还可以在云容器上使用 height:100%，因为它现在是指HTML标签的高度而不是视口的高度。
- Knyri
13
87
使用HTML5，最简单的方法是只需使用 height: 100vh。其中'vh'代表浏览器窗口的视窗高度。该方式支持浏览器和移动设备的缩放适应性。
- alchuang
6
84完全误解了要点。OP正在询问页面的高度，而不是窗口/视口的高度。 - Greg
18文档高度，而不是视口高度。 - punkbit
8与以上相同。 - ericn
13我匆忙地读错了问题，但发现这个答案很有用。谢谢你和我犯同样的错误，但现在我想建议修改这个答案，加上那个警告。 - durette
1顺便说一下，我查了一下，还有
vw。 - Aaron Franke这在移动设备上可能效果不佳，因为地址栏可以在不改变垂直高度值的情况下出现或消失，从而产生奇怪的效果。 - Tim Krief
15
我曾经遇到类似的问题，解决方法是这样的：
#cloud-container{
position:absolute;
top:0;
bottom:0;
}
我想要一个页面居中的 div，高度为页面高度的 100％，所以我的解决方案是：
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width: XXXpx; /*otherwise div defaults to page width*/
margin: 0 auto; /*horizontally centers div*/
}
你可能需要让一个父元素（或者简单地说是 'body'）拥有 position: relative;
- Nate Barr
3
23为什么每个人都把它称为“云容器”？ - Wilf
这真是个好主意！实际上忽略修复高度是个绝妙的想法，我还没有发现任何错误。太棒了。保持简单！感谢你的提示，伙计！ - daneczech
只是标记位置并不能解决问题..我注意到了一些固定页脚的错误。 - mercury
8
使用绝对定位。请注意，这不是我们通常使用绝对定位的方式，它需要手动布局或浮动对话框。当你调整窗口大小或内容时，它会自动拉伸。我相信这需要标准模式，但在IE6及以上版本中也能工作。
只需用您的内容替换id为“thecontent”的div（那里指定的高度仅用于说明，您不必在实际内容上指定高度）。
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>
这是如何运作的，外部div充当导航栏的参考点。 '内容' div 的内容会拉伸外部 div。 导航栏使用绝对定位将自己拉伸到其父元素的高度。 为了水平对齐，我们使内容 div 偏移与导航栏相同的宽度。
这在CSS3 Flexbox模型中变得更加容易，但IE尚不支持它，并且有一些自己的怪癖。
- tstanis
2
嗨tstanis，我在IE6上进行了测试，导航栏没有拉伸。但在FireFox和Chrome上，它的工作效果非常好。 - Lucas Pottersky
在IE6上，除非您已经做过十几次，否则请使用表格或JavaScript或浏览器切换。 - Aaron Digulla
8
我是一名有用的助手，可以为您翻译文本。
我遇到了与您相同的问题。 我想将 DIV 作为背景，因为通过JavaScript很容易操作div。 无论如何，我在该div的css中进行了三个操作。
CSS：
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}
- Talha
7
使用表格非常简单：
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>
在DIV被引入之后，人们对表格感到非常害怕，以至于可怜的DIV成为了象征性的锤子。
- Aaron Digulla
7
6尽管DIV和流体样式很棒，但我认为CSS仍然无法像TABLE实现表格布局的本质。而表格布局仍然是一种可接受的做法。 - Jeff Meatball Yang
13表格适用于表格数据，而不是页面布局。话虽如此，当涉及到古老的100%高度问题时，CSS存在一些主要缺陷。我必须承认，在时间紧迫的情况下，我曾经使用过这种解决方案，但总觉得我在放弃什么。 - Scott Greenfield
6@Scott：我曾经在三个主流浏览器上花费了三周的时间来实现一个100%高度的设计。我真的受够了那些"表格是邪恶的"的说法 :-( 即使对于我的水平，使用DIV也过于复杂。 - Aaron Digulla
1@ScottGreenfield同意，但在CSS能够执行简单的
height: 100%并只需让它工作之前，有时更快的胜利更值得一试。 - Cypher5不需要使用<table>，可以使用<div style="display:table;">。 - Wilf
显示剩余2条评论
7
在弹出模态窗口之前，我希望能够覆盖整个网页。我尝试了很多使用CSS和JavaScript的方法，但都没有帮助，直到我找到了下面的解决方案。它对我有用，我希望它也能帮到你。
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0px 0px;
height 100%;
}
div.full-page {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity:0.8;
overflow-y: hidden;
overflow-x: hidden;
}
div.full-page div.avoid-content-highlight {
position: relative;
width: 100%;
height: 100%;
}
div.modal-popup {
position: fixed;
top: 20%;
bottom: 20%;
left: 30%;
right: 30%;
background-color: #FFF;
border: 1px solid #000;
}
</style>
<script>
// Polling for the sake of my intern tests
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
isReady();
}
}, 1000);
function isReady() {
document.getElementById('btn1').disabled = false;
document.getElementById('btn2').disabled = false;
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function promptModalPopup() {
document.getElementById("div1").style.visibility = 'visible';
document.getElementById("div2").style.visibility = 'visible';
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function closeModalPopup() {
document.getElementById("div2").style.visibility = 'hidden';
document.getElementById("div1").style.visibility = 'hidden';
// enable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'scroll';
}
</script>
</head>
<body id="body">
<div id="div1" class="full-page">
<div class="avoid-content-highlight">
</div>
</div>
<button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
<div id="demo">
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
</div>
<div id="div2" class="modal-popup">
I am on top of all other containers
<button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
<div>
</body>
</html>祝你好运 ;-)
- Chong Chern Dong
3
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
- Swadesh Behera
2
如果你的目标是更现代化的浏览器，生活可以变得非常简单。
尝试：
.elem{
height: 100vh;
}
如果你需要将它放在页面的50%位置，就用50替换100。
- Adam Boostani
1
12假设页面的高度与屏幕高度相同。而实际上，页面通常比屏幕高度要长得多，这就是我们需要向下滚动的原因。 - TidyDev
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
html元素上必须使用min-height（而不仅仅是height）。为什么？ - HartleySanheight就像在说“你这么高，不多不少”，这意味着它将是视口的高度。我们希望它至少与视口一样高或更高。min-height可以很好地实现这一点。 - Knyri