CSS底部固定是一種常見的布局要求，特別是在移動設備上。但是，當我們在手機中輸入文字時，很可能會遇到底部固定的布局問題。這是因為手機鍵盤會被底部固定的元素蓋住，造成用戶無法輸入所需內容。

.bottom-fixed {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}

為了避免這種情況的發生，我們需要對底部固定元素進行特殊處理，讓其能夠隨著手機鍵盤彈起而上移。

一種常見的解決方案是使用JavaScript監聽頁面的“resize”事件，并在鍵盤彈起時改變底部固定元素的位置。

let bottomFixed = document.querySelector('.bottom-fixed');
window.addEventListener('resize', function() {
let keyboardHeight = window.innerHeight - document.body.clientHeight;
if (keyboardHeight >0) {
bottomFixed.style.transform = 'translateY(-' + keyboardHeight + 'px)';
} else {
bottomFixed.style.transform = 'translateY(0)';
}
});

這段代碼監聽窗口的大小變化，在鍵盤彈起時計算出鍵盤高度，然后通過CSS3的“transform”屬性將底部固定元素向上移動。

此時，底部固定元素就能夠在手機鍵盤彈起時正確地顯示并允許用戶輸入內容。