Question

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

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

当我进入高度时，我没有工作：100％;我也试过最小高度：100％;但是没有人工作。我做错了什么？

Answer 1

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

在您的情况下，html和body的高度应设为100%。

＆＃13;

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

＆＃13;

Answer 2

一种方法是简单地将%更改为vh，

＆＃13;

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

＆＃13;

另外，为什么你的代码不起作用是因为你已经尝试过高度：100％但父容器仍然没有达到全高，使得父容器也达到100％会使它占据全高。

如何使div在HTML中到达页面底部

2 个答案: