如何使用 CSS 将页脚固定在浏览器底部？

如何使用 CSS 将页脚附加到浏览器底部

当面临将页脚放置在浏览器底部的挑战时，一个常见的障碍是它始终出现在窗口中间。要解决此问题，您可以使用以下 CSS 样式：

• 确定 HTML 结构：

<code class="HTML"><form>
...
<div class="Main" />
<div id="Footer" />
</form></code>

• 定义相关 CSS：

<code class="CSS">* {
    margin: 0;
}

html, body {
    height: 100%;
}

#Footer {
    background-color: #004669;
    font-family: Tahoma, Arial;
    font-size: 0.7em;
    color: White;
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 4em;
}

.Main {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;

    margin: 0 25% -4em 25%;

    font-family: Verdana, Arial, Tahoma, Times New Roman;
    font-size: 0.8em;
    word-spacing: 1px;
    line-height: 170%;
}</code>

这些样式将页脚位置指定为绝对位置，将底部位置指定为 0，确保其保持固定在浏览器底部。

以上是如何使用 CSS 将页脚固定在浏览器底部？的详细内容。更多信息请关注PHP中文网其他相关文章！