无法使用 CSS 创建页脚答案

【问题标题】：Cannot create footer with CSS无法使用 CSS 创建页脚
【发布时间】：2019-10-19 06:43:58
【问题描述】：

我正在尝试将 div 附加到页面底部。此页面不可滚动，但我无法按像素设置顶部，因为它需要响应屏幕尺寸。我想要的只是页面底部的一个 div，它占据了 100% 的水平空间和 20% 的垂直空间。

我尝试过的：

将父级设为相对，子级设为绝对。
设置父母的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;
}

有什么想法吗？谢谢！

【问题讨论】：

标签： html css user-interface frontend footer

【解决方案1】：

只需将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>

【讨论】：