时间戳

首页 > 解决方案 > 无法使用 CSS 创建页脚

html - 无法使用 CSS 创建页脚

问题描述

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

我试过的：

这是我的代码：

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

有任何想法吗？谢谢！

标签： htmlcssuser-interfacefrontendfooter

解决方案

只需申请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>

推荐阅读