blocks|key|1590434|text|使用HTML5，最简单的方法就是执行height:+100vh。其中'vh‘代表浏览器窗口的视区高度。响应浏览器和移动设备的大小调整。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1590435|entityMap^0|I|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>With HTML5, the easiest way is simply to do <code>height: 100vh</code>. Where 'vh' stands for viewport height of the browser window. Responsive to resizing of browser and mobile devices.</p>


blocks|key|1375147|text|我遇到了类似的问题，解决方案是这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1375148|#cloud-container{
++++position:absolute;
++++top:0;
++++bottom:0;
}|code-block|syntax|javascript|1375149|我想要一个以页面为中心的div，高度是页面高度的100%25，所以我的总体解决方案是：|1375150|#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*/
}|1375151|您可能需要使父元素(或简称为“position:+relative;”)具有正文|offset|length|style|CODE|1375152|entityMap^0|0|0|0|0|F|J|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>I had a similar problem and the solution was to do this:</p>

<pre><code>#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
}
</code></pre>

<p>I wanted a page-centered div with height 100% of page height, so my total solution was:</p>

<pre><code>#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*/
}
</code></pre>

<p>You might need to make a parent element (or simply 'body') have <code>position: relative;</code></p>


blocks|key|1590241|text|你可以用Faux+Columns作弊，也可以用CSS+trickery作弊|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1590242|entityMap|0|LINK|mutability|MUTABLE|url|http://www.alistapart.com/articles/fauxcolumns/|1|http://www.ejeliot.com/samples/equal-height-columns/example-7.html^0|4|C|0|N|C|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

<p>You can cheat using <a href="http://www.alistapart.com/articles/fauxcolumns/" rel="noreferrer">Faux Columns</a>
Or you can use some <a href="http://www.ejeliot.com/samples/equal-height-columns/example-7.html" rel="noreferrer">CSS trickery</a></p>


blocks|key|1375122|text|使用绝对位置。请注意，这不是我们通常使用位置绝对的方式，它需要手动布局或具有浮动对话框。当您调整窗口或内容的大小时，它将自动伸展。我认为这需要标准模式，但在IE6和更高版本中可以工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1375123|只需将div替换为id+'thecontent‘并将其替换为您的内容(指定的高度只是为了说明，您不必在实际内容上指定高度。|1375124|<div+style="position:+relative;+width:+100%25;">
++++++<div+style="position:+absolute;+left:+0px;+right:+33%25;+bottom:+0px;+top:+0px;+background-color:+blue;+width:+33%25;"+id="navbar">nav+bar</div>
++++++<div+style="position:+relative;+left:+33%25;+width:+66%25;+background-color:+yellow;"+id="content">
+++++++++<div+style="height:+10000px;"+id="thecontent"></div>
++++++</div>
</div>|code-block|syntax|javascript|1375125|其工作方式是，外部div充当导航栏的参考点。外部div由“content”div的内容展开。导航栏使用绝对定位将自身伸展到父级的高度。对于水平对齐，我们使内容div自身偏移导航栏的相同宽度。|1375126|这在CSS3+flex+box模型中变得容易得多，但在IE中还不可用，而且有它自己的一些怪癖。|1375127|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Use position absolute.  Note that this isn't how we are generally used to using position absolute which requires manually laying things out or having floating dialogs.  This will automatically stretch when you resize the window or the content.  I believe that this requires standards mode but will work in IE6 and above.</p>

<p>Just replace the div with id 'thecontent' with your content (the specified height there is just for illustration, you don't have to specify a height on the actual content.</p>

<pre><code>&lt;div style="position: relative; width: 100%;"&gt;
      &lt;div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar"&gt;nav bar&lt;/div&gt;
      &lt;div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content"&gt;
         &lt;div style="height: 10000px;" id="thecontent"&gt;&lt;/div&gt;
      &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The way that this works is that the outer div acts as a reference point for the nav bar.  The outer div is stretched out by the content of the 'content' div.  The nav bar uses absolute positioning to stretch itself out to the height of its parent.  For the horizontal alignment we make the content div offset itself by the same width of the navbar.</p>

<p>This is made much easier with CSS3 flex box model, but that's not available in IE yet and has some of it's own quirks.</p>


blocks|key|1375062|text|使用表格很简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1375063|<html>

<head>
++++<title>100%25+Height+test</title>
</head>

<body>
++++<table+style="float:+left;+height:+100%25;+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>|code-block|syntax|javascript|1375064|当DIV被引入时，人们是如此害怕表格，以至于可怜的DIV成了比喻的锤子。|1375065|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>It's simple using a table:</p>

<pre><code>&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;100% Height test&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;table style="float: left; height: 100%; width: 200px; border: 1px solid red"&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;Nav area&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;div style="border: 1px solid green;"&gt;Content blabla... text
        &lt;br /&gt; text
        &lt;br /&gt; text
        &lt;br /&gt; text
        &lt;br /&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>When DIV was introduced, people were so afraid of tables that the poor DIV became the metaphorical hammer.</p>


blocks|key|1590526|text|我想要覆盖整个网页，然后提示模式弹出。我尝试了许多使用CSS和Javascript的方法，但在我找到以下解决方案之前，它们都没有帮助。它对我很有效，我希望它对你也有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1590527|​|1590528|<!DOCTYPE+html>
<html>
	<head>
		<style>
			html,+body+{
			++++margin:+0px+0px;
			++++height+100%25;
			}
++++++++++
++++++++++++div.full-page+{
++++++++++++++++position:+fixed;
++++++++++++++++top:+0;
++++++++++++++++bottom:+0;
++++++++++++++++width:+100%25;
++++++++++++++++height:+100%25;
++++++++++++++++background-color:+#000;
++++++++++++++++opacity:0.8;
++++++++++++++++overflow-y:+hidden;
++++++++++++++++overflow-x:+hidden;
++++++++++++}
++++++++++
++++++++++++div.full-page+div.avoid-content-highlight+{
++++++++++++++++position:+relative;
++++++++++++++++width:+100%25;
++++++++++++++++height:+100%25;
++++++++++++}
++++++++++
++++++++++++div.modal-popup+{
++++++++++++++++position:+fixed;
++++++++++++++++top:+20%25;
++++++++++++++++bottom:+20%25;
++++++++++++++++left:+30%25;
++++++++++++++++right:+30%25;
++++++++++++++++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>|code-block|syntax|javascript|1590529|1590530|祝你好运;-)|1590531|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>I want to cover the whole web page before prompting a modal popup. I tried many methods using CSS and Javascript but none of them help until I figure out the following solution. It works for me, I hope it helps you too.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;style&gt;
			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;
            }
		&lt;/style&gt;
		&lt;script&gt;
		
			// 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';
            }
		&lt;/script&gt;
		
	&lt;/head&gt;
	&lt;body id="body"&gt;
		&lt;div id="div1" class="full-page"&gt;
			&lt;div class="avoid-content-highlight"&gt;
                
            &lt;/div&gt;
		&lt;/div&gt;
        &lt;button id="btn1" onclick="promptModalPopup()" disabled&gt;Prompt Modal Popup&lt;/button&gt;
		&lt;div id="demo"&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
			&lt;h2&gt;Original content&lt;/h2&gt;
		&lt;/div&gt;
        &lt;div id="div2" class="modal-popup"&gt;
            I am on top of all other containers
            &lt;button id="btn2" onclick="closeModalPopup()" disabled&gt;Close&lt;/button&gt;
        &lt;div&gt;
	&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Good luck ;-)</p>


blocks|key|1375356|text|如果你的目标是更现代的浏览器，生活可以非常简单。尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1375357|.elem{++++
++++height:+100vh;
+}|code-block|syntax|javascript|1375358|如果您需要它在页面的50%25，将100替换为50。|1375359|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If you are targeting more modern browsers, life can be very simple.
try:</p>

<pre><code>.elem{    
    height: 100vh;
 }
</code></pre>

<p>if you need it at 50% of the page, replace 100 with 50. </p>


blocks|key|1590367|text|*+{
margin:+0;
}
html,+body+{
height:+90%25;
}
.content+{
min-height:+100%25;
height:+auto+!important;
height:+100%25;
margin:+0+auto+;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1590368|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|1590380|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1590381|+++++++++++document.body.onload+=+function+()+{
++++++++++++++++var+textcontrol+=+document.getElementById("page");
++++++++++++++++textcontrol.style.height+=+(window.innerHeight)+%2B+'px';
++++++++++++}|code-block|syntax|javascript|1590382|<html>
<head><title></title></head>
<body>

<div+id="page"+style="background:green;">
</div>
</body>
</html>|1590383|1590384|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> 
           document.body.onload = function () {
                var textcontrol = document.getElementById("page");
                textcontrol.style.height = (window.innerHeight) + 'px';
            }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt;
&lt;body&gt;

&lt;div id="page" style="background:green;"&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1375429|text|我成功了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1375430|min-height:+100vh|code-block|syntax|javascript|1375431|菜单和内容都是div。|1375432|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I succeeded with</p>
<pre><code>min-height: 100vh
</code></pre>
<p>for both, the menu and content div.</p>


<p>I have a navigation bar on the left hand side of my page, and I want it to stretch to 100% of the page height. Not just the height of the viewport, but including the areas hidden until you scroll. I don't want to use javascript to accomplish this.</p>

<p>Can it be done in HTML/CSS?</p>


CSS Div stretch 100% page height

HTML5

我在页面的左侧有一个导航栏，我想让它伸展到页面高度的100%。不仅包括视口的高度，还包括滚动之前隐藏的区域。我不想使用javascript来完成这项工作。它可以在HTML/CSS中完成吗？

问CSS Div伸展100%页面高度
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS Div伸展100%页面高度EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS Div伸展100%页面高度
EN