資訊專欄INFORMATION COLUMN
摘要：起因早上看群里有人問如何讓商城分類頁在數據不多的情況下充滿屏幕高度第一次回答相信大家的第一反應就是頭高度我也是然后寫了個第二次回答但是人家說頭高度是撐起的沒有具體高度好吧看來只能用了簡單說下默認都是軸布局聲明為后就變成軸布局這樣就可
起因
早上看群里有人問如何讓"商城分類頁"在數據不多的情況下充滿屏幕高度.
相信大家的第一反應就是calc(100vh - 頭高度), 我也是, 然后寫了個demo:
第二次回答(flex-flow:column)但是人家說頭高度是padding撐起的沒有具體高度, 好吧看來只能用flex-flow:column了.
簡單說下flex-flow:column, 默認flex都是x軸布局, 聲明為column后就變成y軸布局, 這樣就可以借助flex自動填充剩余的特性占滿高度:
我是標題 我背景是紅色
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;
}
}
}
點擊預覽
最后沒啥復雜的代碼, 就是感覺比較常見, 可能對新手有幫助, 分享出來拋磚引玉, 因為我只是測試了微信瀏覽器, 其他的第三方瀏覽器沒有嘗試(比如uc), 如果路過的大神有兼容更好的代碼還請不吝賜教.
因為就是寫個demo, 所以也沒有把老的flex語法加上, 現在都是腳手架開發, 編譯的時候自動會給加上, 或者自己配置下相應的插件, 感謝閱讀, 希望能幫助到你.
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116289.html
摘要：使用布局達到了預期的效果，及時內容區較少，頁腳區塊也是固定在底部。二布局方式代碼這種方法就是利用布局對視窗高度進行分割。 什么是Sticky footer布局？前端開發中大部分網站，都會把一個頁面分為頭部區塊、內容區塊、頁腳區塊，這也是比較。往往底部都要求能固定在屏幕的底部，而非隨著文檔流排布。要實現的樣式可以概括如下：如果頁面內容不夠長的時候，頁腳區塊在屏幕的底部；如果內容足夠長的時...
摘要：概念響應式網頁設計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設計和開發方案設計應該做到根據不同設備環境自動響應及調整。預計到年，移動互聯網的數據流量將超越端的流量。 概念 響應式網頁設計最初是由 Ethan Marcotte 提出的一個概念：為什么一定要為每個用戶群各自打造一套設計和開發方案？Web設計應該做到根據不同設備環境自動響應及調整。當然響應式Web設計不僅僅是...
摘要：概念響應式網頁設計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設計和開發方案設計應該做到根據不同設備環境自動響應及調整。預計到年，移動互聯網的數據流量將超越端的流量。 概念 響應式網頁設計最初是由 Ethan Marcotte 提出的一個概念：為什么一定要為每個用戶群各自打造一套設計和開發方案？Web設計應該做到根據不同設備環境自動響應及調整。當然響應式Web設計不僅僅是...
摘要：常見應用場景現在的界面基本都是大同小異宮格布局現在基本成了每個必然的存在帶邊框常用在功能導航頁面無邊框常用在首頁分類設計目標在環境下通過實現宮格并且可以支持有無邊框和每個格是否正方形有邊框且每個格為正方形無邊框最終效果百分比小技巧先解釋一個 常見應用場景 現在的APP界面基本都是大同小異, 宮格布局現在基本成了每個APP必然的存在. 帶邊框, 常用在功能導航頁面 showImg(htt...
小編寫這篇文章的主要目的，是給大家進行一個相關的講解，講解的內容主要是利用Python appium實現模擬手機滑動的操作，具體的一些操作方法，下面給大家做出一個解答。 其實在前面兩個章節的元素定位的場景，我們已經對app中的自動化操作已經略知一二。這里我們發現，實際上appium復用了selenium的很多很多的操作方式，所以像一些點擊、輸入等操作，這種常規的操作的方式與在WEB自動化中的...
閱讀 3689·2021-10-13 09:40
閱讀 3149·2021-10-09 09:53
閱讀 3550·2021-09-26 09:46
閱讀 1848·2021-09-08 09:36
閱讀 4248·2021-09-02 09:46
閱讀 1314·2019-08-30 15:54
閱讀 3179·2019-08-30 15:44
閱讀 1023·2019-08-30 11:06
