成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

手機(jī)html頁(yè)面的垂直布局的基本框架

CatalpaFlat / 585人閱讀

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

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

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

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

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

3、彈性位置（flex）
彈性布局可以根據(jù)容器的情況和設(shè)置的規(guī)則自動(dòng)調(diào)整子元素的大小，非常適合解決垂直布局的問(wèn)題。但是，也有不少坑。第一，彈性布局有一新（display:flex）一舊（display:box）兩個(gè)版本，當(dāng)然想用新版本，可是android版的微信不支持，好在ios和主流的瀏覽器也都支持老版本，所以就先用老版本吧（只是做了簡(jiǎn)單的兼容測(cè)試）。第二，當(dāng)main區(qū)域需要滾屏的時(shí)候，androi版的微信會(huì)導(dǎo)致footer里的button不能響應(yīng)點(diǎn)擊事件，直到滾屏到底，才行，似乎是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、本來(lái)想用main標(biāo)簽，發(fā)現(xiàn)微信的瀏覽器不認(rèn)識(shí)main標(biāo)簽，就直接用div了。
2、微信里如果main區(qū)域需要滾屏，footer似乎就會(huì)被蓋住，無(wú)法響應(yīng)點(diǎn)擊事件，不知道確切的原因是什么，找到下面這段話不知道是不是原因。
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.
為了解決這個(gè)問(wèn)題，加了flex-main-wrap進(jìn)行控制。

參考：
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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/49730.html

相關(guān)文章

  • 手機(jī)html頁(yè)面的垂直布局的基本框架

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

    lavor 評(píng)論0 收藏0

  • CSS及布局

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

    jaysun 評(píng)論0 收藏0

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

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

    lowett 評(píng)論0 收藏0

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

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

    EasonTyler 評(píng)論0 收藏0

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

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

    tracy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<