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. 關docker hub上有些鏡像的tag被標記““This image has vulnerabilities””2. boot2docker無法啟動3. docker-compose中volumes的問題4. docker安裝后出現Cannot connect to the Docker daemon.5. nignx - docker內nginx 80端口被占用6. javascript - mock.js可以存儲數據嗎7. docker網絡端口映射,沒有方便點的操作方法么?8. java - SSH框架中寫分頁時service層中不能注入分頁類9. docker images顯示的鏡像過多,狗眼被亮瞎了,怎么辦?10. java - Spring事務回滾問題

網公網安備