fixed 固定底部組件的一個樣式寫法小技巧

正文

某次修改一個頁面的邏輯，頁面佈局比較簡答，整個頁面 overflow-y: auto;，頁面的底部放置一個 position: fixed;的固定按鈕，以下：css

爲了不頁面主體內容被底部的固定按鈕遮擋，頁面使用了一個 padding-bottom 的樣式屬性，大概關鍵佈局代碼和樣式代碼是這麼寫的：html

<body>
	<div class="main">...</div>
	<div class="footer">這是固定在底部的按鈕</div>
</body>
複製代碼

:root {
	--footer-height: 50px;
}
.main {
	padding-bottom: var(--footer-height);
  overflow-y: auto;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: var(--footer-height);
}
複製代碼

而後我須要加一個A邏輯，當知足我這個 A邏輯的時候，底部固定按鈕就不展現了，其餘狀況則展現markdown

這麼一來樣式佈局就變化了，若是符合我加的A邏輯，那麼 .main的 padding-bottom 屬性就得刪掉了，因此我還得額外再加樣式的邏輯佈局

加這個額外的樣式邏輯卻是沒問題，但實際上這原本是不必的，何況在頁面業務邏輯比較複雜、測試覆蓋不夠全面的時候，再加上若是這個頁面大部分邏輯都不是你寫的，那麼是很容易遺忘這一點的測試

通常而言，在一個項目中，爲了起到複用組件的目的，底部固定按鈕做爲一個明顯存在固定UI規範、明顯能夠被複用的組件，都是會被設計爲通用組件的，通用組件是爲了配合主體業務頁面的，若是變成反過來，我爲了使用你這個通用組件還得專門在主體業務頁面裏寫額外的判斷樣式邏輯，那說明這個通用組件是不夠通用的ui

我但願在使用這個底部固定按鈕的時候，這個組件不該該影響到我主體頁面的其餘部分，例如總體的樣式佈局，可是實際上，針對底部固定按鈕這個具體組件而言，我發現不少人都是這麼設計組件的編碼

若是換作是我來作這個組件，我會這麼寫：spa

<body>
	<div class="main">...</div>
	<div class="footer">
		<div class="footer-content">這是固定在底部的按鈕</div>
	</div>
</body>
複製代碼

:root {
	--footer-height: 50px;
}
.main {
  overflow-y: auto;
}
.footer {
  height: var(--footer-height);
}
.footer-content {
	position: fixed;
  bottom: 0;
  width: 100%;
  height: var(--footer-height);
}
複製代碼

根本不須要 .main 元素專門寫一個 padding-bottom來配合底部固定按鈕組件，由於組件本身會撐開高度設計

相比於文章開頭的那種寫法，我後面的寫法，是多套了一層元素，這多出來的一層元素並不設置 position: fixed;，是一個位於文檔流中佔據實際空間的元素，且其高度與其子元素相同，其子元素纔是真正有展現效果的且 fixed 固定的元素，即父元素負責撐開高度，子元素負責底部固定展現code

這種方法的缺點在於，由於底部固定子元素是 position: fixed;，因此沒法撐開高度，必需要肯定底部固定的子元素高度才能設置父元素的高度

但通常來講這並不算是個問題，底部固定元素基本上都是以按鈕的形式出現，而底部固定按鈕這種通用組件，通常而言其尺寸、圓角、字號大小都是固定的，無非是顏色和文案可能須要換一換，總之高度大機率是能夠提早肯定的是不會變的，直接硬編碼一個高度就完事

若是真的是存在高度須要變化，那麼也不是問題，無非是即時測量一下罷了

固然，這個方法不只是針對於底部固定元素，頂部固定元素也是一樣的道理

小結

第二種方法的小技巧實際上是我好久以前的一個我的思考的結果（固然你可能也想到了），當時我和大多數人同樣，都習慣使用 padding-bottom來維持主體頁面和底部固定按鈕的關係，但有一次我以爲老是寫 padding-bottom 很煩，並且以爲這不合理，因此思考了一下如何將其變得更好，因而我就多會了一個小技巧

寫業務代碼也是須要有思考的，業務代碼沒有什麼技術上的難度，思考的是如何保證代碼項目的可維護性，技術的選型、組件的設計、結構的解耦等都是可思考的方向，這些東西可能很難在績效上體現出來，但最起碼本身寫起來更舒服了不是嗎？