html - 如何修复屏幕末尾的页脚-6ren

html - 如何修复屏幕末尾的页脚

转载作者：行者123 更新时间：2023-11-28 12:18:33

我希望页脚固定在屏幕的末尾我添加到 <h:body style="display: block;">没有变化，我添加到<div id="footer">属性 style="position: fixed"并且没有变化。我页面页脚的图片在下面 enter image description here

最佳答案

您可以试试这个 html 代码，它会起作用。但是它需要#footer 脱离文档流。所以这就是您必须使用 width: 100% 的原因。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        *
        {
            padding: 0;
            margin: 0;
        }
        html, body
        {
            min-height: 100%;
            height: 100%;
        }
        #footer
        {
            position: absolute;
            bottom: 0px;
           /* width: 100%; */
        }
    </style>
</head>
<body>
    <div id="footer">
        this is a footer
    </div>
</body>
</html>

因此，我建议改用这种 html 结构 - 将保留文档流，并为您提供一个干净的 (html4) 结构。

<style type="text/css">
    *
    {
        padding: 0;
        margin: 0;
    }
    html, body
    {
        min-height: 100%;
        height: 100%;
    }
    #header  { height: 20%;  }
    #content { height: 70%;  }
    #footer  { height: 10%;  }
</style>

<div id="header"></div>
<div id="content"></div>
<div id="footer">
    this is a footer
</div>

关于html - 如何修复屏幕末尾的页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19024679/

文章推荐： javascript - 提交时禁用多个表单按钮并发送适当的值？

文章推荐： ios - 定时器停止得太早

文章推荐： Javascript - 排序后获取 'WILL BE' 关系的索引数组

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何修复屏幕末尾的页脚