CSS Div 拉伸 100% 页面高度答案

【问题标题】：CSS Div stretch 100% page heightCSS Div 拉伸 100% 页面高度
【发布时间】：2010-10-17 07:05:22
【问题描述】：

我的页面左侧有一个导航栏，我希望它可以拉伸到页面高度的 100%。不仅是视口的高度，还包括在您滚动之前隐藏的区域。我不想使用 javascript 来完成此操作。

可以用 HTML/CSS 完成吗？

【问题讨论】：

【解决方案1】：

这是我在使用 div 作为动态背景的容器时最终想到的解决方案。

删除 z-index 以供非后台使用。
删除 left 或 right 以获得全高列。
删除 top 或 bottom 以获得全宽行。

编辑 1： 下面的 CSS 已被编辑，因为它在 FF 和 Chrome 中无法正确显示。将 position:relative 移动到 HTML 上并将正文设置为 height:100% 而不是 min-height:100%。

编辑 2： 向 CSS 添加了额外的 cmets。在上面添加了更多说明。

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! */
}

html:

<!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html>

为什么？

html{min-height:100%;position:relative;}

如果没有这个，云容器 DIV 将从 HTML 的布局上下文中删除。 position: relative 确保 DIV 在绘制时保留在 HTML 框内，以便 bottom:0 指向 HTML 框的底部。您还可以在云容器上使用height:100%，因为它现在指的是 HTML 标记的高度，而不是视口。

【讨论】：

这很棒，但不会居中。有什么解决办法吗？边距：0 自动；不工作。
很棒的答案。我注意到你必须在html 元素上使用最小高度（而不仅仅是高度）。这是为什么呢？
使用height 是在说'你这么高;不多也不少。这意味着它将是视口的高度。我们希望它至少与视口一样高或更高。 min-height 做得很好。
z-index 在那里，因为这是我做的移动背景的 sn-p，我想确保 div 留在背景中。普通元素不需要它。
这太棒了。我做 CSS 已经 15 年了，它从来没有点击过定位到<html> 和定位到视口是两件不同的事情。谢谢！

【解决方案2】：

使用 HTML5，最简单的方法就是使用height: 100vh。其中“vh”代表浏览器窗口的视口高度。响应调整浏览器和移动设备的大小。

【讨论】：

完全没有抓住重点。 OP 要求的是页面高度，而不是窗口/视口的高度。
文档高度，而不是视口高度。
同上评论
我匆忙误读了这个问题，发现这个答案很有用。感谢您犯了同样的错误，但现在我想建议修改此答案以包含该警告。
对了，我查了一下，还有vw。

【解决方案3】：

我遇到了类似的问题，解决办法是这样做：

#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;

【讨论】：

为什么大家都叫它cloud-container？
这个不错！忽略固定高度实际上是一个绝妙的主意，我还没有注意到它有任何错误。爱它。亲！感谢您的提示！
使位置无法解决.. 我注意到一些固定页脚的错误

【解决方案4】：

你可以使用Faux Columns作弊或者你可以使用一些CSS trickery

【讨论】：

请注意，虽然 css 诡计会让你获得相等高度的列，但不是 100% 高度的列。
如果导航栏扩展到内容的高度，这决定了页面的高度，它会给你100%的高度。
-1 未提供 100% 安全的方式来确保导航栏始终足够高。
死链接 :((((

【解决方案5】：

使用绝对位置。请注意，这不是我们通常习惯使用绝对位置的方式，这需要手动布局或使用浮动对话框。当您调整窗口或内容的大小时，这将自动拉伸。我认为这需要标准模式，但可以在 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 被 'content' div 的内容拉长。导航栏使用绝对定位将自身伸展到其父级的高度。对于水平对齐，我们使内容 div 自身偏移导航栏的相同宽度。

使用 CSS3 flex box 模型更容易做到这一点，但在 IE 中尚不可用，并且有一些自己的怪癖。

【讨论】：

嗨 tstanis，我在 IE6 上进行了测试，导航栏 没有拉伸。不过，在 FireFox 和 Chrome 上，它确实工作得很好。
在 IE6 上，使用表格或 JavaScript 或浏览器切换，除非您之前已经这样做了十几次。

【解决方案6】：

我遇到了和你一样的问题。我想制作一个DIV 作为背景，为什么，因为它很容易通过javascript 操作div。无论如何，我在 css 中为那个 div 做了三件事。

CSS：

{    
position:absolute; 
display:block; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
z-index:-1;    
}

【讨论】：

【解决方案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 变成了比喻性的锤子。

【讨论】：

虽然 DIV 和流畅的样式很棒，但我认为 CSS 仍然无法像 TABLE 实现表格布局的本质一样捕捉屏幕布局的本质。 ...而且表格布局仍然是一种可以接受的做事方式。
表格用于表格数据，而不是页面布局。话虽如此，当涉及到古老的 100% 高度问题时，CSS 有一些主要缺点。我不得不承认，我在紧迫的期限内使用了这个解决方案，但我总觉得我要放弃了。
@Scott：我曾经浪费了三个星期试图在三个主要浏览器中获得 100% 的高度设计。我真的再也听不到“表格是邪恶的”的废话了:-(即使据我所知，使用 DIV 也太复杂了。
适当的规划确保不需要依赖表。现在是 2012 年，整个行业都在突破 IE6/7，我强烈建议不要使用 100% 高度的表格！
你不必使用，你可以使用

【解决方案8】：

我想在提示模态弹出窗口之前覆盖整个网页。我尝试了许多使用 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>

祝你好运;-)

【讨论】：

【解决方案9】：

如果您的目标是更现代的浏览器，生活可能会非常简单。试试：

.elem{    
    height: 100vh;
 }

如果您在页面的 50% 处需要它，请将 100 替换为 50。

【讨论】：

这假设页面高度与屏幕高度相同。页面通常比屏幕的高度长很多，这就是我们向下滚动的原因。

【解决方案10】：

* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}

【讨论】：

【解决方案11】：

 
           document.body.onload = function () {
                var textcontrol = document.getElementById("page");
                textcontrol.style.height = (window.innerHeight) + 'px';
            }

<html>
<head><title></title></head>
<body>

<div id="page" style="background:green;">
</div>
</body>
</html>

【讨论】：

请在你的答案中添加一些解释，展示它的作用以及它如何解决问题
div "page" 100% 高度任何平台。只需将 js 脚本复制到标记并粘贴到 HTML 代码中。

【解决方案12】：

很简单，只需将其包装在一个表格 div 中...

HTML：

<div class="fake-table">
   <div class="left-side">
     some text
   </div>
   <div class="right-side">
     My Navigation or something
   </div>
</div>

CSS：

<style>

 .fake-table{display:table;width:100%;height:100%;}
 .left-size{width:30%;height:100%;}
 .left-size{width:70%;height:100%;}

</style>

【讨论】：

【解决方案13】：

我成功了

min-height: 100vh

对于菜单和内容 div。

【讨论】：

这在移动设备上可能效果不佳，因为地址栏可以出现或消失而无需从技术上更改垂直高度值，从而产生奇怪的效果。
vh = 视口高度（屏幕高度）！= 页面高度（网站高度）