无法使用 CSS 创建页脚

Question

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

的 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;
}

有什么想法吗？谢谢！

Answer 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>

无法使用 CSS 创建页脚

Cannot create footer with CSS

html

css

user-interface

frontend

footer