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

資訊專欄INFORMATION COLUMN

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

CatalpaFlat / 505人閱讀

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

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

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

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

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

3、彈性位置（flex）
彈性布局可以根據容器的情況和設置的規則自動調整子元素的大小，非常適合解決垂直布局的問題。但是，也有不少坑。第一，彈性布局有一新（display:flex）一舊（display:box）兩個版本，當然想用新版本，可是android版的微信不支持，好在ios和主流的瀏覽器也都支持老版本，所以就先用老版本吧（只是做了簡單的兼容測試）。第二，當main區域需要滾屏的時候，androi版的微信會導致footer里的button不能響應點擊事件，直到滾屏到底，才行，似乎是main把footer覆蓋了（footer一直可見），設置了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標簽，發現微信的瀏覽器不認識main標簽，就直接用div了。
2、微信里如果main區域需要滾屏，footer似乎就會被蓋住，無法響應點擊事件，不知道確切的原因是什么，找到下面這段話不知道是不是原因。
When the computed value for the overflow property is ‘visible’, ‘scroll’ or ‘auto’, 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/

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49730.html

相關文章

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

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

    lavor 評論0 收藏0

  • CSS及布局

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

    jaysun 評論0 收藏0

  • 響應式布局方案

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

    lowett 評論0 收藏0

  • 響應式布局方案

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

    EasonTyler 評論0 收藏0

  • 響應式布局方案

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

    tracy 評論0 收藏0

發表評論

0條評論

CatalpaFlat

男|高級講師

TA的文章

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