固比固布局 聖杯布局 css實現傳統手機app布局

2022-05-12 20:56:04 字數 838 閱讀 4589

我們需要實現的是頭部、底部高度固定；中間內容區域自適應且可以滾動；直接貼**；

css：

html,body 


body 


section 


header 


footer 


p
html：

<


body


>


<


header


>頭部


header


>


<


section


>


<


p>這是可以滾動的


p>


<


p>這是可以滾動的


p>


<


p>這是可以滾動的


p>


<


p>這是可以滾動的


p>


<


p>這是可以滾動的


p>


<


p>這是可以滾動的


p>


<


p>這是可以滾動的


p>


<


p>這是可以滾動的


p>


<


p>這是可以滾動的


p>


<


p>這是可以滾動的


p>


section


>


<


footer


>底部


footer


>


body


>
效果圖：

CSS聖杯布局

本文與之前 css雙飛翼布局 一文有些相似，在html結構上他們可以說是相同的。樣式主要表現為浮動 負邊距 定位。在 css雙飛翼布局 中，為了排開左右兩邊遮擋main元素的區域，是給main又新增了乙個子元素，用子元素來控制main所要顯示內容的寬度與位置，這是乙個不錯的方法，但從結構上來講，我們...

CSS 布局3 聖杯布局

聖杯布局是有 的工程師提出，巧妙的利用我們介紹過的定位技術 負邊距 相對定位 浮動 組合運用。輕鬆實現常見布局。我們在前面介紹過，使用浮動特性，實現三列布局，但是使用div布局，有乙個問題，那就是內容區，在左邊區和右邊區之後渲染。下面我們使用聖杯布局的思路，實現乙個內容區渲染在前的三列布局。1 負邊...

CSS經典布局 聖杯布局

廢話不多說，先上全部的 body container container column center left right footer ie6 fix html left 首先就是建立大體的布局，header footer container 給 container 乙個預設的padding le...