{"id":19667446,"url":"https://github.com/jchehe/css-sticky-footer","last_synced_at":"2025-02-27T04:18:58.161Z","repository":{"id":145196383,"uuid":"48353928","full_name":"JChehe/CSS-Sticky-Footer","owner":"JChehe","description":"no hacks","archived":false,"fork":false,"pushed_at":"2019-10-11T06:41:45.000Z","size":4,"stargazers_count":0,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-10T02:55:00.660Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JChehe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-12-21T06:05:42.000Z","updated_at":"2015-12-21T06:36:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"31647b38-3df2-4c1a-b7bc-a9ced1b4fd0a","html_url":"https://github.com/JChehe/CSS-Sticky-Footer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JChehe%2FCSS-Sticky-Footer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JChehe%2FCSS-Sticky-Footer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JChehe%2FCSS-Sticky-Footer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JChehe%2FCSS-Sticky-Footer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JChehe","download_url":"https://codeload.github.com/JChehe/CSS-Sticky-Footer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240976466,"owners_count":19887488,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T16:32:12.151Z","updated_at":"2025-02-27T04:18:58.137Z","avatar_url":"https://github.com/JChehe.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 让footer固定在页面（视口）底部（CSS-Sticky-Footer ）\n\n标签： html、css\n\n---\n\n这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧。由HTML和CSS实现，没有令人讨厌的hacks。所以这就能在所有主流浏览器上正常运行（甚至包括IE5和IE6）。\n\n###如何通过用CSS让Footer固定在页面顶部。\n在样式表单里添加下面几行CSS代码。`.wrapper` 的负外边距与 `.footer` 和 `.push` 的高度相等。负外边距应该与footer的整体高度相等（包括padding、border）。\n\n    * {\n        margin: 0;\n    }\n    html, body {\n        height: 100%;\n    }\n    .wrapper {\n        min-height: 100%;\n        height: auto !important; /* 如果你不需要考虑IE6，则可以把这行与下一行代码删除 */\n        height: 100%;\n        margin: 0 auto -4em;\n    }\n    .footer, .push {\n        height: 4em;\n    }\n\n按照此 HTML 结构。没有内容会超出 .wrapper 和 .footer 的 `div` 标签，除非超出内容是通过CSS的绝对定位。另外，`.push` 的 `div` 标签也不应该含有内容，毕竟它是作为一个将footer“推”下去的隐藏元素。否则会与footer的内容重叠。\n\n    \u003chtml\u003e\n        \u003chead\u003e\n            \u003clink rel=\"stylesheet\" href=\"layout.css\" /\u003e\n        \u003c/head\u003e\n        \u003cbody\u003e\n            \u003cdiv class=\"wrapper\"\u003e\n                \u003cp\u003eYour website content here.\u003c/p\u003e\n                \u003cdiv class=\"push\"\u003e\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"footer\"\u003e\n                \u003cp\u003eCopyright (c) 2008\u003c/p\u003e\n            \u003c/div\u003e\n        \u003c/body\u003e\n    \u003c/html\u003e\n\n\n----------\n\n\n####多列布局（通过浮动）\n为 `.push` div 添加 clear 属性。\n    \n    .footer, .push {\n        clear: both;\n    }\n\n####height:auto!important; 和 height:100%;属性\n这两个属性是为了在IE6及以下的浏览器实现 [min-height](http://caniuse.com/#search=min-height) 效果(min-height只兼容IE7及以上)。所以，当你不需要考虑IE6时，可把这两个属性删除。\n\n\u003e 因为IE6是考虑元素内容的尺寸，而不是元素本身尺寸。在符合标准的浏览器中，如果元素的内容太大，它只会超出框之外。但是在IE6中，如果元素内容太大，则整个元素就会扩展(包括宽和高)。即设定的width表现得像min-width。\n\n参考：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjchehe%2Fcss-sticky-footer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjchehe%2Fcss-sticky-footer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjchehe%2Fcss-sticky-footer/lists"}