需求
昨天晚上，給公司年會做一個移動端的投票頁面，遇到一個UI優(yōu)化的問題：
· 正文內(nèi)容少于一屏時，投票提交按鈕固定顯示在頁面底部（如圖一）
· 正文內(nèi)容多于一屏時，投票提交按鈕，跟隨內(nèi)容，流式顯示在內(nèi)容下面（如圖二）
附圖：
以前做一些管理后臺的時候，底部的版權(quán)信息聲明就是這樣的UI需求，實現(xiàn)思路大概就是：
底部按鈕，需要一直顯示在底部，可以給body設個最小100%高度，然后用絕對定位把按鈕顯示在body底邊靠上一點的位置，這樣內(nèi)容少的時候，100%的高度起作用，按鈕會顯示在底部，內(nèi)容多的時候，內(nèi)容會把body的高度撐出一屏出現(xiàn)滾動條，而按鈕是基于body絕對定位，所以可以跟著滾動條走，一直在內(nèi)容的底部顯示。
關(guān)鍵代碼就是這樣：
html結(jié)構(gòu)：
html>body>.wrap+.bottom-bar
html {
height: 100%;
} body {
min-height: 100%;
position:relative;
}.bottom-bar&n
延伸閱讀
- ssh框架
2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍牙鎖
2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標分割】
2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞
2017-07-26
- 從棧不平衡問題 理解 calling convention
2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明
2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解
2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應用分析
2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二)
2017-07-26
學習是年輕人改變自己的最好方式