CSS Div拉伸100％页面高度

195

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

可以在HTML / CSS中完成吗？

— 汤姆
source

171

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

删除z-index用作非背景用途。
卸下left或更换right为全高柱。
删除top或bottom获取全角行。

编辑1：由于无法在FF和Chrome中正确显示以下CSS，因此已对其进行了编辑。移到position:relativeHTML上，并将主体设置为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! */
}

的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标签的高度，而不是视口。

— 克尼里
source

这很棒，但不会居中。有什么解决办法吗？margin：0自动; 不起作用。

— 2012年

很棒的答案。我注意到您必须在html元素上使用min-height（而不仅仅是高度）。这是为什么？

— 哈特利圣

用语height是“你这么高？不多也不少。这意味着它将是视口的高度。我们希望它至少与视口一样高或更高。min-height做得很好。

— Knyri 2013年

1

之所以有z-index，是因为这是我做过的移动背景的摘要，我想确保div停留在背景中。普通元素不需要它。

— 克尼里（Knyri）2014年

5

太好了我从事CSS已有15年了，它从未单击过，将定位到<html>和将视口定位是两个不同的事情。谢谢！

— Ben Hull

81

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

— 阿尔创
source

38

完全遗漏了要点。OP要求的是页面的高度，而不是窗口/视口的高度。

— 格雷格

9

文档高度，而不是视口高度。

— punkbit '16

7

与上述相同的评论

— ericn

11

我匆忙弄错了问题，发现此答案很有用。谢谢您犯了与我相同的错误，但是现在我想建议对此答案进行修改以包括该警告。

— durette

顺便说一句，我抬起头来，还有vw。

— 亚伦·弗兰克

14

我有一个类似的问题，解决方案是这样做：

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

— 内特·巴尔
source

16

为什么每个人都称它为cloud-container？

— Wilf 2014年

这是一个不错的！忽略固定高度实际上是一个绝妙的主意，但我还没有发现任何错误。爱它。吻！谢谢小费人！

— daneczech '16

13

您可以使用Faux Columns作弊，也可以使用一些CSS技巧

— 瑞安·多尔蒂（Ryan Doherty）
source

1

请注意，尽管CSS技巧会让您获得相等高度的列，但不会获得100％高度的列。

— thedz

如果导航栏扩展到内容的高度（确定页面的高度），它将为您提供100％的高度。

— Ryan Doherty

1

-1表示未提供100％安全的方式来确保导航栏始终足够高。

— 亚伦·迪古拉

— 无效

9

使用表很简单：

<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）
source

6

尽管DIV和流畅的样式很棒，但我认为CSS仍然无法像TABLE达到表格布局的本质一样，捕捉屏幕布局的本质。...而且表格布局仍然是可以接受的处理方式。

— 杰夫·肉丸杨

8

表用于表格数据，而不是页面布局。话虽如此，CSS在涉及古老的100％高度问题时存在一些主要缺点。我必须承认，我在紧迫的期限内使用了此解决方案，但总感觉就像我在放弃。

— Scott Greenfield

6

@Scott：我曾经浪费了三个星期，试图在三种主要的浏览器中获得100％的高度设计。我真的无法听到“表是邪恶的”废话了:-(即使我所知，使用的DIV是太复杂了。

— 亚伦Digulla

1

适当的计划可确保无需依赖表。现在是2012年，随着整个行业超越IE6 / 7，我强烈建议不要使用高度为100％的桌子！

— Vael Victus

4

您不必使用<table>，可以使用<div style =“ display：table;” ：D

— Wilf 2014年

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由“ content” div的内容扩展。导航栏使用绝对定位将自身伸展到其父代的高度。对于水平对齐，我们使内容div自身偏移导航栏的宽度。

CSS3弹性框模型使此操作变得更加容易，但是IE中尚不可用，并且其中有一些怪癖。

— 斯坦尼斯
source

嗨，tstanis，我在IE6上进行了测试，导航栏没有拉伸。在FireFox上，Chrome确实可以很好地工作。

— 卢卡斯·波特斯基

在IE6上，除非您已做过12次以上，否则请使用表或JavaScript或浏览器开关。

— 亚伦·迪古拉

7

如果您瞄准的是更现代的浏览器，那么生活可能非常简单。尝试：

.elem{    
    height: 100vh;
 }

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

— 亚当·波斯塔尼（Adam Boostani）
source

3

假定页面高度与屏幕高度相同。页面通常比屏幕高度长很多，因此为什么我们向下滚动。

— TidyDev

6

我遇到了与您相同的问题。我想以DIVas为背景，为什么，因为它易于通过javascript操作div。无论如何，我在该div的CSS中做了三件事。

CSS：

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

— 塔哈
source

5

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

展开摘要

祝好运 ;-）

— 张崇东
source

2

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

— Swadesh Behera
source

1

 
           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>

展开摘要

— reaw_ni
source

请在回答中添加一些解释，以说明其作用以及如何解决问题

— 我们的香蕉

div“页面”任何平台的高度均为100％。只需将js脚本复制到<script> </ script>标记并粘贴到HTML代码中即可。

— reaw_ni 2014年

0

很简单，只需将其包装在一个表分区中即可。

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>

— 斯蒂芬·佩里（Steffan Perry）
source