HTML 新增乙個自適應footer

2021-09-29 03:08:57 字數 1711 閱讀 5857

乙個可調整的輸入框和footer

–> 調整輸入框大小後,footer自動下移

所謂自適應的footer,就是指:footer的至多出現在網頁底部,並且如果允許,總是出現在底部。

這就保證了:網頁載入時,使用者能夠在最底部看到footer;如果網頁內容高度發生變化,footer要麼上移要麼下移,上移不能超過底部之上,保證和內容的和平共處。

這個布局的難點主要是內容自適應: 內容不足視窗高度時,顯示在底部;內容超過視窗是,顯示在最底部。

最簡單的思路可分為三個步驟:1.設定容器的最小空間 2.元素自動佔據容器的剩餘空間 3.定位到最底部

首先,要明白一點:網頁顯示時,就chrome瀏覽器而言,html和body的高度就是內容的大小。

通過將html的height設定成100%, html可以佔據整個螢幕;但是body仍舊是內容大小;為此,可將body的大小也設定成100%.但是設定之後,body的大小不能發生變化,類似於上面的輸入框擴大到最大大小後,無法擴大。此時,可將body的height換成min-height解決不可擴充套件的問題。

body預設情況下可能有margin,設定min-height100%可能出現滾動條,因此設定其margin-top,margin-bottom均為0.

因此,為了解決網頁載入時,body的大小沒有佔據螢幕大小的情況,設定:

html

body

通過將body鋪滿,然後我們可以使用flex的兩個特性:1.定位特性,即通過設定align-itemsflex-end,使元素自動定位到底部 2.使用flex-grow的特殊情況,當flex容器中只有兩個元素時,如果其中乙個元素沒有設定flex-grow(或者為0),另外乙個元素設定為任意值,則其將鋪滿剩餘空間。

乙個可擴充套件自適應的日曆元件

這個元件除了很多自帶的api,最好的部分是你可以拿到他vue原始碼,然後進行自定義樣式和功能。github位址如下 效果如下 專案裡的calendar.js是處理農曆日期的,我們如果不需要農曆可以不引入,並把vue中的對應 刪了。我們可以拿到對應的vue 就可以自定義我們樣式了,我們把頭部樣式改成我...

自適應濾波器遇到的乙個問題

最近寫自適應濾波器方面的程式的時候,遇到了乙個問題,濾波器沒有收斂到我想象之中的那個解,疑惑了一陣,後來發現一些問題,也許別人也會遇到,於是記錄下來分享一下,少走彎路。事情是這樣,基於最基本的方法 lms演算法。確定乙個輸入訊號,比如 u n sin 0n 我設定的期望訊號是 de sire n c...

實現乙個高度自適應的輸入框

有placeholder,輸入為空時,顯示placeholder 可設定maxlength 將textarea的高度設定成auto,overflow設定成visible。如下 height auto overflow x visible overflow y visible width 300px ...