我不能让div到达页面的底部。下面是我的代码:
<!DOCTYPE html>
<html>
<style>
#Welcome {
background-color: pink;
height: 100%;
}
</style>
<div id="Welcome">
Welcome!
</div>
</html>
我没有工作,当我输入高度: 100%;我也尝试了min-height: 100%;但两者都不起作用。我做错了什么?
发布于 2018-06-02 23:14:14
height: 100%
属性使元素采用父元素的100%高度。父元素应该定义高度,否则高度将根据其子元素进行调整。
在您的示例中,html
和body
的高度应设置为100%
。
<!DOCTYPE html>
<html>
<style>
html, body {
height: 100%;
}
#Welcome {
background-color: pink;
height: 100%;
}
</style>
<div id="Welcome">
Welcome!
</div>
</html>
发布于 2018-06-03 00:44:50
一种方法是简单地将%
更改为vh
,
<!DOCTYPE html>
<html>
<style>
#Welcome {
background-color: pink;
height: 100vh;
}
</style>
<body>
<div id="Welcome">
Welcome!
</div>
</body>
</html>
另外,为什么你的代码不能工作是因为你尝试了高度: 100%,但父容器仍然不是全高的,将父容器也设为100%会使它占据全高。
https://stackoverflow.com/questions/50658279
复制相似问题