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

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

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

我无法让我的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>

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

热门问答

如何快速入门Kafka消息队列?

那么,我来讲讲Kafka 常用命令 修改topic 配置参数 —— 改保持时间 ./kafka-topics.sh --zookeeper 1.1.1.1:2181/kafka --alter --topic Barad_Comm --config retention.ms=43...... 展开详请

Kafka对实时数据的主要优势是什么?

红月努力的程序喵
Kafka的优点 在这里,我们列出了卡夫卡的一些优势。基本上,这些Kafka优势使Kafka成为我们数据湖实施的理想选择。那么,让我们开始详细了解Kafka的优势: 📷 卡夫卡的利弊 - 卡夫卡的优势 A. 高通量 没有那么大的硬件,Kafka能够处理高速和大容量的数据。此外,能...... 展开详请

Kafka Streams:流式计算、Kafka Streams的特点和架构是什么?

我贼迷美丽策
总结一下吧: Kafka Streams是一个类库,实现了流式计算的能力、除Kafka外无任何外部依赖、充分利用了Kafka的水平扩容和容错等能力 通过state store为状态计算提供了可能;通过replicated change log和log compact解决了stat...... 展开详请

如何在腾讯云上运用python?

叶叶程序猿,码农
实例有很多呀,比如下面这个。社区都能找得到。 Python实现腾讯云CDB备份文件自动上传到COS 一、背景 需求:目前遇到的客户需求为将腾讯云CDB备份文件自动上传到腾讯云COS内,再次抛砖引玉,还有很多类似的需求均可以采用此类方法解决,线下IDC数据文件备份至云端COS内,或...... 展开详请

腾讯云TStack上的云Oracle有哪些优点和应用?

倩倩威武只想写一辈子Java的单身狗
利用Ceph云盘“可同时挂载给多个计算节点”的特性,可以实现云Oracle的“HA双机热备”和“集群高可用”两个高可用方案 📷 HA双机热备是在单实例云Oracle的基础上,再增加一个HA实例,HA实例只安装数据库软件,平时不挂载Ceph云盘。主实例和HA实例共享云...... 展开详请

云安全解决方案的优势是什么?

嗨喽你好摩羯座
云计算安全解决方案的五大优势 云计算彻底改变了信息技术的格局。几年前,一些大公司通过投资昂贵的定制现场软件来实现规模经济,这些软件由高技能IT员工组成。但现在,它已全部改变,并被云取代。 随着越来越多的公司将其基础架构和数据迁移到云,这里出现的最关键问题与云计算的安全性有关。云安...... 展开详请

所属标签

扫描关注云+社区