CSS Sticky Footer

最新推荐文章于 2024-03-14 00:15:00 发布

伏见伊奈里

最新推荐文章于 2024-03-14 00:15:00 发布

阅读量376

点赞数

分类专栏： CSS 前端综合

本文链接：https://blog.csdn.net/qq_35313994/article/details/75255312

版权

前端综合同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

页面内容不够长的时候，页脚在贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送，在页面内容的最底部。

css

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    html,
    body,
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    .mainbody {
      min-height: 100%;
      /*等于页脚高 */
      margin-bottom: -50px;
    }

    .mainbody:after {
      content: "";
      display: block;
    }

    .footer,
    .mainbody:after {
      /* 页脚高 */
      height: 50px;
    }

    .footer {
      background: red;
      color: yellow;
      line-height: 50px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="mainbody">

    <h1>Sticky Footer</h1>
    <p>content:css伪元素</p>
  </div>

  <footer class="footer">
    The Sticky Footer.
  </footer>
</body>

css（flex布局）

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html {
      height: 100%;
    }

    body {
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }

    .mianbody {
      flex: 1;
    }

    .footer {
      background: red;
      color: yellow;
      line-height: 50px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="mianbody">

    <h1>Sticky Footer</h1>

    <p>flex布局</p>
  </div>
  <div class="footer">footer</div>
</body>

</html>

css使用calc()设置内容高度

calc（）

calc() = calc(四则运算) 用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

兼容性：

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
6.0-8.0	2.0-3.6	4.0-18.0	3.1-5.1	15.0+	3.2-5.1	2.1-4.3	18.0
9.0+	4.0-15.0 ^-moz-	19.0-25.0 ^-webkit-	6.0 ^-webkit-		6.0-6.1 ^-webkit-	4.4-4.4.4	19.0-25.0 ^-webkit-
9.0+	16.0+	26.0+	6.1+		7.0+	4.4-4.4.4	26.0+

vh

相对于视口的高度。视口被均分为100单位的vh

示例代码：

h1 {font-size: 8vh;}

如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

兼容性：

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
6.0-8.0	2.0-18.0	4.0-25.0	3.1-5.1	15.0+	3.2-5.1	2.1-4.3	18.0-25.0
9.0+	19.0+	26.0+	6.0+	15.0+	6.0+	4.4+	26.0+

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.mianbody {
			min-height: calc(100vh - 50px);
		}

		.footer {
			background: red;
      color: yellow;
      line-height: 50px;
      text-align: center;
		}
	</style>
</head>

<body>
	<div class="mianbody">

		<h1>Sticky Footer</h1>

		<p>calc()设置内容高度</p>

	</div>
	<div class="footer">footer</div>
</body>

</html>