国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

手機html頁面的垂直布局的基本框架

lavor / 1758人閱讀

摘要：第一，彈性布局有一新一舊兩個版本，當(dāng)然想用新版本，可是版的微信不支持，好在和主流的瀏覽器也都支持老版本，所以就先用老版本吧只是做了簡單的兼容測試。

手機頁面的一種典型布局方式為：頭（header）、主體（main）和底（footer），頭和底放一些常用的操作，主體部分顯示內(nèi)容，如下圖：

要達到的效果是header固定在頭部，footer固定在底部，主體部分可以滾動，實現(xiàn)的思路有如下幾種：

1、固定位置（fixed）
利用CSS的position:fixed是最直接的方式，分別將header和footer固定在窗口的頂和底。雖然這種方式最簡單直接，但是存在兩個問題：1、中間的主體部分必須為header和footer預(yù)留出空間，否則內(nèi)容就會被蓋住。如果header和footer的高度已知且固定，可以通過給主體設(shè)置margin解決。如果不是已知的就麻煩了，必須要借助js進行計算才行，因此這種方式的的靈活性不夠；2、在iOS環(huán)境下，如果頁面上有input空間，輸入時調(diào)用軟鍵盤會導(dǎo)致fixed失效，footer顯示的位置就亂了（android下沒有問題）。所以，fixed方式雖然看似簡單，用起來問題不少。

2、絕對位置（absolute）
采用絕對定位就是把header，main和footer都用absolute放在固定的位置上，讓main支持自動滾動，這樣內(nèi)容多的時候滾動只發(fā)生在main里面，header和footer的位置固定。這種方式的局限是必須確定header和footer的高度，如果不確定需要借助js，靈活性不夠。

3、彈性位置（flex）
彈性布局可以根據(jù)容器的情況和設(shè)置的規(guī)則自動調(diào)整子元素的大小，非常適合解決垂直布局的問題。但是，也有不少坑。第一，彈性布局有一新（display:flex）一舊（display:box）兩個版本，當(dāng)然想用新版本，可是android版的微信不支持，好在ios和主流的瀏覽器也都支持老版本，所以就先用老版本吧（只是做了簡單的兼容測試）。第二，當(dāng)main區(qū)域需要滾屏的時候，androi版的微信會導(dǎo)致footer里的button不能響應(yīng)點擊事件，直到滾屏到底，才行，似乎是main把footer覆蓋了（footer一直可見），設(shè)置了z-index也不管用。

看代碼：


    

        
    

    

        

            
    
                
  • 
            

            
        

    

    

        
        
    


.flex-frame{height:100%;width:100%;background:#eff;display:-webkit-box;-webkit-box-orient:vertical;}
.flex-bar{display:-webkit-box;padding:4px;background:#eee;}
.flex-bar>button{display:block;-webkit-box-flex:1.0;margin-left:4px;}
.flex-bar>button:first-child{margin-left:0;}
.flex-main{position:relative;background:#ccc;-webkit-box-flex:1.0;overflow-y:hidden;padding-bottom:80px;}
.flex-main-wrap{position:absolute;top:0;bottom:0;left:0;right:0;overflow-y:auto;}
var data = [], i = 0;
while (i<30) {
     data.push("row:" + i);
     i++;
}
$scope.data = data;
$scope.click = function(event, name) {
     alert("click " + name);
}

看例子

PS：
1、本來想用main標(biāo)簽，發(fā)現(xiàn)微信的瀏覽器不認(rèn)識main標(biāo)簽，就直接用div了。
2、微信里如果main區(qū)域需要滾屏，footer似乎就會被蓋住，無法響應(yīng)點擊事件，不知道確切的原因是什么，找到下面這段話不知道是不是原因。
When the computed value for the overflow property is ‘visible’, ‘scroll’ or ‘a(chǎn)uto’, the content may overflow the container. If the computed value for direction is normal, the content will overflow over the right or bottom side. If the computed value for direction is reverse, the content will overflow over the left or top side.
為了解決這個問題，加了flex-main-wrap進行控制。

參考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout
http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115033.html

相關(guān)文章

  • 手機html頁面的垂直布局的基本框架

    摘要：第一，彈性布局有一新一舊兩個版本，當(dāng)然想用新版本，可是版的微信不支持，好在和主流的瀏覽器也都支持老版本，所以就先用老版本吧只是做了簡單的兼容測試。 手機頁面的一種典型布局方式為：頭（header）、主體（main）和底（footer），頭和底放一些常用的操作，主體部分顯示內(nèi)容，如下圖：showImg(https://segmentfault.com/img/bVstLo);要達到的效果...

    CatalpaFlat 評論0 收藏0

  • CSS及布局

    摘要：經(jīng)過半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發(fā)做好準(zhǔn)備。這兩種方式實現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁窗口大小改變時的列數(shù)自適應(yīng)。主要是對于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看...

    jaysun 評論0 收藏0

  • 響應(yīng)式布局方案

    摘要：說到響應(yīng)式布局方案，我們首先需要了解視口這個概念視口在早期的時候我們沒有專門針對手機尺寸寫的頁面，所以在用手機瀏覽頁面的時候我們看到的都是專門針對端的頁面，在這種情況下頁面會被嚴(yán)重壓縮，而且會極大的影響頁面的結(jié)構(gòu)和布局，為了解決這個問題，蘋 說到響應(yīng)式布局方案，我們首先需要了解視口這個概念 視口 在早期的時候我們沒有專門針對手機尺寸寫的頁面，所以在用手機瀏覽頁面的時候我們看到的都是專門...

    lowett 評論0 收藏0

  • 響應(yīng)式布局方案

    摘要：說到響應(yīng)式布局方案，我們首先需要了解視口這個概念視口在早期的時候我們沒有專門針對手機尺寸寫的頁面，所以在用手機瀏覽頁面的時候我們看到的都是專門針對端的頁面，在這種情況下頁面會被嚴(yán)重壓縮，而且會極大的影響頁面的結(jié)構(gòu)和布局，為了解決這個問題，蘋 說到響應(yīng)式布局方案，我們首先需要了解視口這個概念 視口 在早期的時候我們沒有專門針對手機尺寸寫的頁面，所以在用手機瀏覽頁面的時候我們看到的都是專門...

    EasonTyler 評論0 收藏0

  • 響應(yīng)式布局方案

    摘要：說到響應(yīng)式布局方案，我們首先需要了解視口這個概念視口在早期的時候我們沒有專門針對手機尺寸寫的頁面，所以在用手機瀏覽頁面的時候我們看到的都是專門針對端的頁面，在這種情況下頁面會被嚴(yán)重壓縮，而且會極大的影響頁面的結(jié)構(gòu)和布局，為了解決這個問題，蘋 說到響應(yīng)式布局方案，我們首先需要了解視口這個概念 視口 在早期的時候我們沒有專門針對手機尺寸寫的頁面，所以在用手機瀏覽頁面的時候我們看到的都是專門...

    tracy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<