html 底部固定

2024年4月28日 128次阅读 来源: 小脑fu 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>底部固定</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<style>
html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

header {
  background-color: #ffe4c4;
}

main {
  /*box-sizing: border-box;*/
  /*height: 1200px;*/
  padding-bottom: 100px;
  background-color: #ccc;
}


/* main的padding-bottom值要等于或大于footer的height值 */

footer {
  opacity: 0.5;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: #ffc0cb;
}
</style>

<body>
  <header>header</header>
  <main>content
    <p>asdfasdf</p>
    <p>asdfasdf</p>
    <p>asdfasdf</p>
  </main>
  <footer>footer</footer>
</body>
<script>
</script>
<html>
    原文作者：小脑fu
    原文地址: https://segmentfault.com/a/1190000009962109
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞