如何在HTML中使div到达页面底部
如何在HTML中使div到达页面底部
提问于 2018-06-02 23:11:29
我不能让div到达页面的底部。下面是我的代码：
<!DOCTYPE html>
<html>
<style>
#Welcome {
background-color: pink;
height: 100%;
}
</style>
<div id="Welcome">
Welcome!
</div>
</html>
我没有工作，当我输入高度: 100%；我也尝试了min-height: 100%；但两者都不起作用。我做错了什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 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>
Stack Overflow用户
发布于 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%会使它占据全高。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50658279
复制相关文章
相似问题