基于flex-flow:column, 實現(xiàn)"商城分類頁"充滿屏幕高度

BlackFlagBin 發(fā)布于2019-08-30 15:44 / 3187人閱讀

摘要：起因早上看群里有人問如何讓商城分類頁在數(shù)據(jù)不多的情況下充滿屏幕高度第一次回答相信大家的第一反應(yīng)就是頭高度我也是然后寫了個第二次回答但是人家說頭高度是撐起的沒有具體高度好吧看來只能用了簡單說下默認都是軸布局聲明為后就變成軸布局這樣就可

起因

早上看群里有人問如何讓"商城分類頁"在數(shù)據(jù)不多的情況下充滿屏幕高度.

第一次回答(calc)

相信大家的第一反應(yīng)就是calc(100vh - 頭高度), 我也是, 然后寫了個demo:

第二次回答(flex-flow:column)

但是人家說頭高度是padding撐起的沒有具體高度, 好吧看來只能用flex-flow:column了.
簡單說下flex-flow:column, 默認flex都是x軸布局, 聲明為column后就變成y軸布局, 這樣就可以借助flex自動填充剩余的特性占滿高度:


  我是標(biāo)題

  
    
      側(cè)邊欄, 我是藍色
    

    
      我背景是紅色

main {
  display: flex;
  flex-flow: column;
  height:100vh;
  header {
    padding: 15px;
    background: #fff;
  }
  > article {
    flex:1;
    display: flex;

    aside {
      padding: 15px;
      background: #00f;
    }

    article {
      flex: 1;
      background: red;
    }
  }
}

點擊預(yù)覽

最后

沒啥復(fù)雜的代碼, 就是感覺比較常見, 可能對新手有幫助, 分享出來拋磚引玉, 因為我只是測試了微信瀏覽器, 其他的第三方瀏覽器沒有嘗試(比如uc), 如果路過的大神有兼容更好的代碼還請不吝賜教.

因為就是寫個demo, 所以也沒有把老的flex語法加上, 現(xiàn)在都是腳手架開發(fā), 編譯的時候自動會給加上, 或者自己配置下相應(yīng)的插件, 感謝閱讀, 希望能幫助到你.

GPU云服務(wù)器云服務(wù)器 Quote quoted quot python b&quot&quot

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

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

相關(guān)文章

前端經(jīng)典布局：Sticky footer 布局

摘要：使用布局達到了預(yù)期的效果，及時內(nèi)容區(qū)較少，頁腳區(qū)塊也是固定在底部。二布局方式代碼這種方法就是利用布局對視窗高度進行分割。什么是Sticky footer布局？前端開發(fā)中大部分網(wǎng)站，都會把一個頁面分為頭部區(qū)塊、內(nèi)容區(qū)塊、頁腳區(qū)塊，這也是比較。往往底部都要求能固定在屏幕的底部，而非隨著文檔流排布。要實現(xiàn)的樣式可以概括如下：如果頁面內(nèi)容不夠長的時候，頁腳區(qū)塊在屏幕的底部；如果內(nèi)容足夠長的時...

JerryWangSAP 2019-08-02 10:35 評論0 收藏0
重溫&quot;什么是響應(yīng)式網(wǎng)頁設(shè)計？響應(yīng)式布局的實現(xiàn)原理&quot;

摘要：概念響應(yīng)式網(wǎng)頁設(shè)計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設(shè)計和開發(fā)方案設(shè)計應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動響應(yīng)及調(diào)整。預(yù)計到年，移動互聯(lián)網(wǎng)的數(shù)據(jù)流量將超越端的流量。概念響應(yīng)式網(wǎng)頁設(shè)計最初是由 Ethan Marcotte 提出的一個概念：為什么一定要為每個用戶群各自打造一套設(shè)計和開發(fā)方案？Web設(shè)計應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動響應(yīng)及調(diào)整。當(dāng)然響應(yīng)式Web設(shè)計不僅僅是...

Nekron 2019-08-29 12:28 評論0 收藏0
重溫&quot;什么是響應(yīng)式網(wǎng)頁設(shè)計？響應(yīng)式布局的實現(xiàn)原理&quot;

摘要：概念響應(yīng)式網(wǎng)頁設(shè)計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設(shè)計和開發(fā)方案設(shè)計應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動響應(yīng)及調(diào)整。預(yù)計到年，移動互聯(lián)網(wǎng)的數(shù)據(jù)流量將超越端的流量。概念響應(yīng)式網(wǎng)頁設(shè)計最初是由 Ethan Marcotte 提出的一個概念：為什么一定要為每個用戶群各自打造一套設(shè)計和開發(fā)方案？Web設(shè)計應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動響應(yīng)及調(diào)整。當(dāng)然響應(yīng)式Web設(shè)計不僅僅是...

Joyven 2019-08-01 16:43 評論0 收藏0
css如何實現(xiàn)n宮格布局?

摘要：常見應(yīng)用場景現(xiàn)在的界面基本都是大同小異宮格布局現(xiàn)在基本成了每個必然的存在帶邊框常用在功能導(dǎo)航頁面無邊框常用在首頁分類設(shè)計目標(biāo)在環(huán)境下通過實現(xiàn)宮格并且可以支持有無邊框和每個格是否正方形有邊框且每個格為正方形無邊框最終效果百分比小技巧先解釋一個常見應(yīng)用場景現(xiàn)在的APP界面基本都是大同小異, 宮格布局現(xiàn)在基本成了每個APP必然的存在. 帶邊框, 常用在功能導(dǎo)航頁面 showImg(htt...

sarva 2019-08-30 15:44 評論0 收藏0
利用Python appium實現(xiàn)模擬手機滑動操控的操作

　　小編寫這篇文章的主要目的，是給大家進行一個相關(guān)的講解，講解的內(nèi)容主要是利用Python appium實現(xiàn)模擬手機滑動的操作，具體的一些操作方法，下面給大家做出一個解答。　　其實在前面兩個章節(jié)的元素定位的場景，我們已經(jīng)對app中的自動化操作已經(jīng)略知一二。這里我們發(fā)現(xiàn)，實際上appium復(fù)用了selenium的很多很多的操作方式，所以像一些點擊、輸入等操作，這種常規(guī)的操作的方式與在WEB自動化中的...

89542767 2022-10-14 10:44 評論0 收藏0