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

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

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

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

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

wsnbb203wsnbb203提问于
六个六有理想有目标有追求的铂金农药玩家/ACM菜鸟/科幻渣渣作家/心理学砖家回答于

你是用的百分号是相对于父元素的,你这种情况推荐你两种方案,方案一是利用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>

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

回答过的其他问题

COS中CDN免费额度10GB,只用了50MB就提示欠费,为什么?

六个六有理想有目标有追求的铂金农药玩家/ACM菜鸟/科幻渣渣作家/心理学砖家

由于COS是后付费的产品,所以一定要保证账户中有余额,一旦余额为负所有后付费产品都会停服。所以建议你检查以下余额是否不足,充值后再试一次。

如何区分ElasticSearch,Apache Solr和SolrCloud?

六个六有理想有目标有追求的铂金农药玩家/ACM菜鸟/科幻渣渣作家/心理学砖家
Solr与Linux,安卓等非常相似 - 拥有非常强大的功能,你可以使用这个功能来做很多事情,但并不都是完美的。 Elasticsearch更像苹果手机- 开箱即用,更简单,没有那么多的复杂性等等,所以很难判断他们谁好谁坏。主要还是取决于你的喜好,就像我自己,虽然苹果手机能我带来...... 展开详请

FileZilla通过ftp地址连接主机提示530?

六个六有理想有目标有追求的铂金农药玩家/ACM菜鸟/科幻渣渣作家/心理学砖家

建议采用被动模式登录,因为主动模式的相关参数是需要在客户端配置的,而这些参数配置出现错误可能导致无法正常连接,由于服务器是已经配好服务的,所以用被动模式会容易一些。点此可以了解主动模式与被动模式的区别

为什我的腾讯云服务器cpu占用100%?

六个六有理想有目标有追求的铂金农药玩家/ACM菜鸟/科幻渣渣作家/心理学砖家
推荐
首先进入你的服务器中,如果远程桌面的方法连不上就用VNC的方法连接,连上后在任务栏上点右键,选择任务管理器,再点击进程选项卡(就是你截图的那里),接下来根据下面的具体情况进行处理: 情况一:占用资源的进程是你的业务进程,而且与实际的业务量相匹配。 这种情况下,你...... 展开详请

企业网站通过了ICP备案,还需要通过公安备案吗?

六个六有理想有目标有追求的铂金农药玩家/ACM菜鸟/科幻渣渣作家/心理学砖家

目前多数省份不强制公安备案,不过个人意见还是备案好。

网游加速器的原理是什么?

六个六有理想有目标有追求的铂金农药玩家/ACM菜鸟/科幻渣渣作家/心理学砖家
加速器的原理大概如下: 未加速的游戏链接:用户本地----------------------------------------------------游戏服务器 使用加速器的链接:用户本地----------加速器服务器---------游戏服务器(通过代理快速链接到游戏服...... 展开详请

关于作者

六个六

有理想有目标有追求的铂金农药玩家/ACM菜鸟/科幻...

扫描关注云+社区