如何使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>

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

热门问答

如何在CentOS上创建Kubernetes集群?

土子美互联网从业者
系统环境 kubeadm支持多种系统,这里简单介绍一下需要的系统要求: Ubuntu16.04+ / Debian 9 / CentOS 7 / RHEL 7 / Fedora 25/26(best-effort) / HypriotOS v1.0.1+ / Other 2GB或...... 展开详请

如何做到精准的语音识别?

为了解决这个问题,我们将单词划分为更小的单元,称为电话。在英语(和许多印度语言)中,大约有50个电话可以组合成任何单词。例如,单词“Hello”可以分为“HH,AH,L,OW”。您可以查找CMU发音字典[6]以进行英语单词的语音扩展。 ASR的问题归结为识别电话序列而不是单词。这...... 展开详请

腾讯云的实时语音趣味变声是如何实现的呢?有哪些应用场景呢?

腾讯云游戏多媒体引擎GME创新性地引入了变声的玩法,让变声成为了游戏内置的功能。只要接入GME的SDK,游戏研发厂商就可以提供给玩家更加丰富有趣的游戏内语音体验,让玩家在不借助任何外部设备的情况下,实现抠脚大汉变声萝莉、变声口吃的的有趣玩法。 目前,腾讯云GME的这个变声功能已应...... 展开详请

微信小程序音视频怎么开发?

麦大师程序猿
关于小程序和webrtc。如果跟我一样是一个实用主义者,那我就简单从实用主义角度说一下我的结论:小程序搞定了手机,WebRTC拿下了PC。 如果你对技术比较感兴趣,那我们就可以从多个技术的角度去列举两者的区别,下面是一张详细对比的表格: 📷 实现原理: 小程序音视频是将腾讯视频云...... 展开详请

如何入门小程序开发?

Hello World - 入门 在第一阶段,我们不需要了解小程序历史和技术细节,您只需要跟随我们完成基本的Hello World例子即可。 第一步 参考上一篇教程,下载微信开发者工具,并根据自己对应的操作系统进行安装。 第二步 打开微信开发者工具,选择新建小程序项目,我们先不需...... 展开详请

如何转向基于云的Web开发?

使用云计算开发Web应用程序 对于任何Web应用程序开发,都必须拥有一个基于服务器的应用程序,它将为程序员提供在Internet上启动代码的最佳环境。基于Web的应用程序需要持续监控,团队实际上必须在服务器之前坐下来,寻找可能破坏应用程序正常工作的任何错误问题。 在研究刻板印象的...... 展开详请

所属标签

扫码关注云+社区