css3移動端布局
問題描述
css3有什么技巧能讓section的高度加上header和footer的高度正好是屏幕的高度不能用定位的,這關系到安卓的軟鍵盤會把頁面向上頂---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>
問題解答
回答1:這種布局使用 flex 再合適不過了。
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 自動生成,瀏覽器的兼容性很理想。下面是 codepen 中的效果:
http://codepen.io/yuezk/pen/NqEqVv
相關文章:
1. html - vue項目中用到了elementUI問題2. mysql scripts提示 /usr/bin/perl: bad interpreter3. showpassword里的this 是什么意思?代表哪個元素4. css3 - border-bottom 的長度可否超過盒子的寬度呢?實現如下圖效果。(我的書下面的線)5. android - 用textview顯示html時如何寫imagegetter獲取網絡圖片6. 對mysql某個字段監控的功能7. css3 - css怎么實現圖片環繞的效果8. javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?9. JavaScript事件10. mysql優化 - mysql EXPLAIN之后怎么看結果進行優化 ?
