版權footer始終置於頁面的底部，內容少時置於頁面底部，內容多時隨滾動條滾動
1.使用flex布局
<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>
//CSS代碼如下
.Site {
display: flex;
display: -webkit-flex; /* Safari */
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
ps:解釋一下vh: vh是相對於視窗的高度,視窗高度是100vh;視窗是指瀏覽器內部可視區的大小，window.innerWidth、window.innerHeight大小
原文鏈接：https://blog.csdn.net/qq_39198420/article/details/77505663
2.使用css函數 calc(expression)
calc() 函數用於動態計算長度值。
- 需要注意的是，運算符前后都需要保留一個空格，例如：
width: calc(100% - 10px)； - 任何長度值都可以使用calc()函數進行計算；
- calc()函數支持 "+", "-", "*", "/" 運算；
- calc()函數使用標准的數學運算優先級規則
注意點：瀏覽器支持