早兩天寫過一篇博講到滿屏布局和非滿屏布局的情況，其中對於非滿屏講了一點點內容，這次講下滿屏布局的一些內容，就是聖杯布局。
這個**就是使用了所謂的聖杯布局，它的特點就是**左邊的選單欄是固定寬度的，而右邊的內容區則是不固定寬度的，可以拉伸自適應的，由當前瀏覽器的寬度決定它的寬度。在網頁的布局方法中，有很多種分欄布局方式，而聖杯布局是這麼多分欄方式中常見也是常用的一種，因為它可以做到一欄甚至是多欄固定，某一欄寬度自適應，至於具體使用哪種布局方式就看我們的需求。
那麼具體的聖杯布局方式通過**是怎麼實現的呢？我們可以拿這個**來看下。
不知道大家看懂了沒有，這三段**就很好的詮釋了聖杯布局的要點。
首先，我們最外層的盒子，即page-container，通過設乙個margin-left或者是padding-left為235px，使得這個最外層盒子在布局的時候空出了左邊235px的位置。
然後，我們page-container的子元素，即我們的左邊選單欄page-sidebar，此時通過定寬235px，同時利用position定位或者是margin-left=-235px這樣的寫法，讓我們的左邊欄回到原本空出的位置。
最後，我們的內容區只需要設定寬度為100%，然後我們的聖杯布局就寫完了。
聖杯布局詳解
樣式表很簡單，就是說你有乙個左邊的寬度為200px的列，右邊有乙個寬度為150px的列，中間的列自適應。核心的css 如下 這種方式能夠相容現在的許多主流瀏覽器，例如 safari,opera,firefox,and with the single rule hack at the bottom i...
聖杯式布局
作者森西悠然 關注 2016.07.17 18 58 字數 1500 閱讀 3234 喜歡 32 愛生活，不愛黑眼圈 稍微了解前端的人都知道，聖杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現你懂html結構又能體現出你對 iv css布局的掌握，畢竟我們學習css主要就是為了更好地布局帶來...
實現聖杯布局
聖杯布局特點 左右兩欄都是固定的寬度，中間欄的寬度隨著瀏覽器的變化而變化 在網頁載入過程中先載入中間主體在載入兩邊部分 效果 例項 左邊右邊 疑難點1.不要給container盒子設定寬度 因為他會繼承瀏覽器的寬度，如果設定了盒子寬度100 那麼我們在使用內邊距的時候就會出現滾動條，這個時候可以使用...