全屏布局應(yīng)用：管理系統(tǒng)把夸、監(jiān)控平臺(tái)、統(tǒng)計(jì)平臺(tái)等铭污。
全屏布局特點(diǎn)：1恋日、縮放屏幕膀篮，頁(yè)面始終撐滿(mǎn)瀏覽器窗口；2谚鄙、滾動(dòng)條控制局部區(qū)域各拷。
下面我們來(lái)實(shí)現(xiàn)一種全屏布局，它的整體寬度自適應(yīng)闷营、高度固定，橫向分為三欄知市，分別為頂欄傻盟、主內(nèi)容區(qū)、底欄嫂丙，頂欄與底欄定高娘赴，主內(nèi)容區(qū)高度自適應(yīng)。主內(nèi)容區(qū)又分為左邊欄和右邊欄跟啤，左邊欄定寬诽表，右邊欄寬高自適應(yīng)。滾動(dòng)條出現(xiàn)在右邊欄隅肥。
以下介紹兩種方法1竿奏、position；2腥放、flex泛啸。
1、使用position秃症。分為兩步候址，第一步，確定位置种柑，我們可以把整個(gè)頁(yè)面分為上岗仑、左、右聚请、下四大塊荠雕，然后設(shè)置position:absolute，使用left良漱、top舞虱、right、bottom對(duì)每塊進(jìn)行定位母市。第二步矾兜，設(shè)置滾動(dòng)條。在需要設(shè)置滾動(dòng)的right上設(shè)置overflow: auto患久；當(dāng)right里面內(nèi)容塊的高度超過(guò)某個(gè)值后椅寺，right出現(xiàn)滾動(dòng)條浑槽。戳我查看演示。
2返帕、使用flex桐玻。flex有一個(gè)屬性-flex-direction，它的值為row | row-reverse | column | column-reverse荆萤∧餮ィ可以使用它形成橫向布局。戳我查看演示链韭。
注意：使用flex存在瀏覽器兼容性問(wèn)題偏竟。
設(shè)置寬高除了使用px形式，還可以使用百分比形式敞峭。
上面假定的是頂欄踊谋、底欄、左邊欄設(shè)置了固定的寬或高旋讹，假如我想自適應(yīng)寬（高）度呢殖蚕？
自適應(yīng)的話(huà)，使用position貌似做不到沉迹，因?yàn)橹鲀?nèi)容區(qū)的position定位依賴(lài)于頂欄與底欄的固定高度睦疫。我們可以使用flex來(lái)實(shí)現(xiàn)上述要求，還有一種Grid方法胚股，但由于Grid在W3c中還是草案笼痛，所以也就不做介紹。
使用flex實(shí)現(xiàn)全屏布局內(nèi)容自適應(yīng)只需要把之前設(shè)定的固定寬高值刪除琅拌，瀏覽器就會(huì)默認(rèn)該元素寬高自適應(yīng)缨伊。
最后，比較一下使用Position进宝、Flex刻坊、Grid三種方案實(shí)現(xiàn)全屏布局：
參考網(wǎng)易前端微專(zhuān)業(yè)全屏布局。
