如何使div到达HTML页面的底部?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (4)
  • 关注 (0)
  • 查看 (81)

我无法让我的div到达页面底部。这是我的代码:

<!DOCTYPE html>
<html>
<style>
#Welcome {
	background-color: pink;
    height: 100%;
}
</style>
<div id="Welcome">
Welcome!
</div>
</html>

我在身高时没有工作:100%; 我也试过最小高度:100%; 但是没有人工作。我究竟做错了什么?

提问于
用户回答回答于

你是用的百分号是相对于父元素的,你这种情况推荐你两种方案,方案一是利用vh作为单位,这个单位是相对于页面高度的百分比,方案二是利用JS直接读取出页面的高度,然后把div设置成为对应的高度,下面给你两个例子供你测试。

方案一:

<!DOCTYPE html>
<html>
 <head>
  <style>
   #Welcome
   {
    background-color: pink;
    height:100vh;
   }
  </style>
 </head>
 <body>
  <div id="Welcome">Welcome!</div>
 </body>
</html>

方案二:

<!DOCTYPE html>
<html>
	<head>
		<style>
			#Welcome
			{
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="Welcome">Welcome!</div>
		<script type="text/javascript">
			var s=window.innerHeight;
			s+="px";
			document.getElementById("Welcome").style.height=s;
		</script>
	</body>
</html>

但方案二是div的高度是不能随窗口高度的变化而变化的,要想能够随窗口高度变化而变化,需要调整为如下内容

<!DOCTYPE html>
<html>
	<head>
		<style>
			#Welcome
			{
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="Welcome">Welcome!</div>
		<script type="text/javascript">
			function he()
			{
				var s=window.innerHeight;
				s+="px";
				document.getElementById("Welcome").style.height=s;
			}
			he();
			window.onresize=function(){he();}
		</script>
	</body>
</html>

方案二与方案二的改进版需要浏览器支持活动脚本才能正常使用(通常浏览器是默认支持的,除非手工关闭)但还是建议使用方案一。

用户回答回答于

一种方法是简单地改变%vh

<!DOCTYPE html>
<html>
<style>
#Welcome {
	background-color: pink;
    height: 100vh;
}
</style>
<body>
<div id="Welcome">
Welcome!
</div>
</body>
</html>
用户回答回答于
用户回答回答于

height: 100%属性使元素占据父元素的100%高度。父元素应该定义高度,否则高度将根据其子元素进行调整。

在你的情况下,高度htmlbody应该设置为100%

<!DOCTYPE html>
<html>
<style>
 html, body {
  height: 100%;
 }
#Welcome {
	background-color: pink;
    height: 100%;
}
</style>
<div id="Welcome">
Welcome!
</div>
</html>

扫码关注云+社区