那些遇到过的问题

CSS Div拉伸100%页面高度

Tom*_*Tom 180 css height max stretch

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

可以在HTML/CSS中完成吗？

Kny*_*yri 166

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

  • 删除z-index非背景用途.
  • 移除left或right使用全高柱.
  • 删除top或bottom全宽行.

编辑1:下面的CSS已被编辑,因为它在FF和Chrome中无法正确显示.移动position:relative到HTML并将主体设置为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! */
}
Run Code Online (Sandbox Code Playgroud)

html:

<!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

为什么？

html{min-height:100%;position:relative;}
Run Code Online (Sandbox Code Playgroud)

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

  • 这很棒.我已经做了15年的CSS,它从未点击过这个定位到`<html>`并且定位到视口是两个不同的东西.谢谢! (4认同)

alc*_*ang 70

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

  • 完全忽略了这一点.OP要求页面高度,而不是窗口/视口的高度. (24认同)
  • 我匆匆误读了这个问题,发现这个答案很有用.感谢你犯了同样的错误,但现在我想建议修改这个答案以包括那个警告. (8认同)
  • 文档高度,而​​不是视口高度. (6认同)
  • 与上述相同的评论 (5认同)

Rya*_*rty 13

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

  • 它让我想起我讨厌CSS :( (28认同)

Nat*_*arr 12

我有类似的问题,解决方案是这样做:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
}
Run Code Online (Sandbox Code Playgroud)

我想要一个以页面为中心的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*/
}
Run Code Online (Sandbox Code Playgroud)

您可能需要创建父元素(或简称"body") position: relative;

  • 为什么每个人都称它为"云容器"？ (15认同)

Aar*_*lla 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>
Run Code Online (Sandbox Code Playgroud)

当DIV被引入时,人们如此害怕桌子,穷人的DIV成为了隐喻的锤子.

  • 表格用于表格数据,而不是页面布局.话虽这么说,当谈到古老的100%高度问题时,CSS有一些主要的缺点.我不得不承认,我已经在紧迫的期限内使用了这个解决方案,但总觉得我放弃了. (7认同)
  • 虽然DIV和流畅的风格很棒,​​但我认为CSS仍然无法捕捉到屏幕布局的本质,就像TABLE实现表格布局的本质一样.......表格布局仍然是可以接受的做事方式. (5认同)
  • @Scott:我曾经浪费了三个星期的时间试图在三种主流浏览器中获得100%的高度设计.我真的听不到"桌子是邪恶的"废话了:-(即使据我所知,使用DIV也太复杂了. (5认同)
  • 你不必使用<table>,你可以使用<div style ="display:table;" :d (4认同)

小智 7

使用绝对位置.请注意,这不是我们通常习惯使用绝对位置的方式,这需要手动布局或具有浮动对话框.当您调整窗口或内容的大小时,这将自动拉伸.我认为这需要标准模式,但可以在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>
Run Code Online (Sandbox Code Playgroud)

这种方式的工作方式是外部div充当导航栏的参考点.外部div由"content"div的内容延伸.导航栏使用绝对定位将其自身伸展到其父级的高度.对于水平对齐,我们使内容div自身偏移导航栏的相同宽度.

使用CSS3 flex box模型可以轻松实现这一点,但是IE尚未提供,并且有一些自己的怪癖.

小智 5

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

CSS:

{    
position:absolute; 
display:block; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
z-index:-1;    
}
Run Code Online (Sandbox Code Playgroud)

Cho*_*ong 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>
Run Code Online (Sandbox Code Playgroud)

祝你好运 ;-）

Ada*_*ani 5

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

.elem{    
    height: 100vh;
 }
Run Code Online (Sandbox Code Playgroud)

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

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

归档时间：

查看次数：

328194 次

最近记录：

7 年，11 月 前
如何用JavaScript获取整个文档的高度？ 309
更多相关链接
相关归档
有SASS.js吗？像LESS.js这样的东西？ 110
CSS:图片链接,悬停时更改 61
CSS和JavaScript文件在Maven Web应用程序项目中的位置是什么？ 47
Highcharts - 关于完整图表宽度的问题 36
在图像加载时保持div高度 21
相邻的div有边角？ 16
如何防止ListView扩展窗口维度？ 5
python numpy argmax to multi in multidimensional array 4
简单的MySQL问题 - MAX(字段)？ 2
为什么我网站的身体标签不能伸展100%？ -1
难疑归档
如何丢弃Git中的未分级更改？ 4562
将字节转换为字符串？ 1968
JavaScript中的'new'关键字是什么？ 1684
在jQuery中检测移动设备的最佳方法是什么？ 1564
确定整数平方根是否为整数的最快方法 1403
为什么文本文件以换行符结尾？ 1375
如何在git中按名称命名和检索存储？ 1276
虚拟成员在构造函数中调用 1270
从JS数组中删除重复值 1225
获取数据库中所有表的大小 1180