HTML5 + CSS 左右排版自适应高
傳統(tǒng)的HTML + CSS的左右排版一般會用 float來處理，但在高度自適應(yīng)的情況下，由其是當(dāng)一邊的高超出body的100%以后，就會有BUG存在。
現(xiàn)在我介紹Flex排版，以下是Demo， 這個Demo，已經(jīng)可以完美運行在IE10+，Chrome，FireFox。理論上Safari也應(yīng)該匹配。
關(guān)于Flex的布局的基礎(chǔ)知識我引用另外一個博客的教程：Flex 布局教程：語法篇?，各位同學(xué)自行去學(xué)習(xí)。
以下我重點說說有可能出現(xiàn)問題的地方。
1. <!DOCTYPE html> 當(dāng)出現(xiàn)這個HTML5的標(biāo)簽時，html,body的樣式里面，必須設(shè)置高為100%（vh）；
因為，在這個標(biāo)簽的作用下，div的height設(shè)置為100%(vh)需要繼承父標(biāo)簽，在我們的印象中div最頂層的標(biāo)簽應(yīng)為<body>，但其實body也不是最頂層的標(biāo)簽，因為它還有<html>這一個最頂級的父標(biāo)簽，所以當(dāng)div的height設(shè)置為100%(vh)時，必需為每一層的父標(biāo)簽均設(shè)置100%，包括html與body標(biāo)簽，只要這樣的繼承關(guān)系下里面的div所設(shè)置的100%高度才得以生效，其效果與最外層html的高度一樣。
2. 為了適應(yīng)多瀏覽器，建議使用 "vh" 代替?"%" ；
3. min-height，max-height 樣式只能在非IE的瀏覽器中生效；
4. .main::after是為了解決IE無法使用min-height而存在的，如沒有這段CSS則在IE中Flex無法響應(yīng)body的“height: 100%(vh)”，如果你不打算兼容IE，這段CSS可以刪除；
5. left與right里面設(shè)置的高度是為了測試內(nèi)容超出body高度時的效果而設(shè)置的，實際使用中沒有存在的必要，只要按照正常使用就可以，默認(rèn)為全屏，當(dāng)超出body的height時出會出現(xiàn)滾動條。
?
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" > 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 6 <title>Flex Test</title> 7 <style> 8 html, body { 9 margin: 0px; 10 padding: 0px; 11 height: 100vh; 12 } 13 .main { 14 display: -webkit-flex; 15 display: flex; 16 -ms-flex-direction: row; 17 flex-direction: row; 18 align-items: stretch; 19 min-height: 100vh; 20 } 21 22 .main::after { 23 content: ''; 24 height: 100vh; 25 width: 0; 26 overflow: hidden; 27 visibility: hidden; 28 float: left; 29 } 30 31 .left { 32 width: 200px; 33 background: #F0F0F0; 34 flex-shrink: 0; 35 } 36 37 .right { 38 flex-grow: 1; 39 background: yellow; 40 } 41 </style> 42 </head> 43 44 <body> 45 <div class="main"> 46 <div class="left"> 47 <div style="height: 300px;"> 48 </div> 49 </div> 50 51 <div class="right"> 52 <div style="height: 1000px;"> 53 test test test 54 </div> 55 </div> 56 </div> 57 </body> 58 </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/badtree/articles/7117826.html
總結(jié)
以上是生活随笔為你收集整理的HTML5 + CSS 左右排版自适应高的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： bzoj 2844: albus就是要第
- 下一篇： JavaScript作用域学习笔记(if