css3移動(dòng)端布局
問(wèn)題描述
css3有什么技巧能讓section的高度加上header和footer的高度正好是屏幕的高度不能用定位的，這關(guān)系到安卓的軟鍵盤(pán)會(huì)把頁(yè)面向上頂---css---.indexPage{ width:100%; height:100%; overflow:hidden; }.indexPage header{ height:100px; overflow:hidden;}.indexPage section{ width:100%; overflow:hidden;}.indexPage footer{ height:100px; overflow:hidden;}---html---<article class='indexPage'> <header></header> <section></section> <footer></footer></article>
問(wèn)題解答
回答1：這種布局使用 flex 再合適不過(guò)了。
csshtml,body { height: 100%;}body { margin: 0;}article { height: 100%; display: flex; flex-direction: column; text-align: center;}header { height: 50px; background: #ccc;}footer { height: 50px; background: #ccc;}section { flex: 1; background: #eee;}
前綴使用 autoprefixer 自動(dòng)生成，瀏覽器的兼容性很理想。下面是 codepen 中的效果：
http://codepen.io/yuezk/pen/NqEqVv
相關(guān)文章：
1. index.php錯(cuò)誤，求指點(diǎn)2. python小白，問(wèn)一個(gè)關(guān)于可變類(lèi)型和不可變類(lèi)型底層的問(wèn)題3. html5 - qq空間播放視頻的返回?cái)?shù)據(jù)4. python - PyQt5 如何獲得標(biāo)題?5. 前端 - 關(guān)于webstrom提交merge代碼的問(wèn)題？6. node.js - 微信小程序 +nodejs+socket.io bug7. nginx和web服務(wù)都跑在docker容器里時(shí)，nginx負(fù)載均衡如何配置服務(wù)的IP地址8. MYSQL新建用戶(hù)設(shè)置可以遠(yuǎn)程訪(fǎng)問(wèn)的問(wèn)題9. dict - Python判斷字典中是否有重復(fù)值10. html5 - 微信瀏覽器視頻播放失敗
網(wǎng)公網(wǎng)安備