我正在尝试将一个 div 附加到页面底部。此页面不可滚动，但我无法按像素设置顶部，因为它需要响应屏幕尺寸。我想要的只是页面底部的一个 div，它占据 100% 的水平空间和 20% 的垂直空间。
我尝试过的:
- 使 parent 亲戚和 child 绝对。
- 设置 parent 的
min-height: 100%
这是我的代码:
<html>
<head>
<title>Forget It</title>
<link rel="stylesheet" href="../static/styles.css">
</head>
<body>
<div class='parent'>
<div class='ground'></div>
</div>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #96b4ff;
}
.parent {
position: relative;
min-height: 100%;
}
.ground {
position: absolute;
height: 20%;
bottom: 0;
background-color: #2cb84b;
}
有什么想法吗？谢谢!
最佳答案
只需将 width: 100%; 应用到 .ground 即可使 div 占据全宽。
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #96b4ff;
}
.parent {
position: relative;
min-height: 100%;
}
.ground {
position: absolute;
height: 20%;
width: 100%;
bottom: 0;
background-color: #2cb84b;
}<div class='parent'>
<div class='ground'>footer</div>
</div>关于html - 无法使用 CSS 创建页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58461210/