您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關怎么使用Flex布局實現頭部固定內容區域滾動,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
頁面頭部固定布局以前用 position:fixed實現,如今可以用flex布局實現,快捷方便。
Flex布局好處:1.不破壞html文檔流 2.兼容性更好。
display: flex 和 display: -webkit-box 僅是各階段命名,并沒有區別。
<view> <view class="header"></view> <view class="content"></view> </view>
page{ display: -webkit-box; //設置彈性布局 -webkit-box-orient: vertical; //設置子元素垂直布局 height: 100%; } .header:{ height: 50px; //設置頭部高度( 位置固定) } .content:{ -webkit-box-flex: 1; //設置1等份占滿全屏 overflow: auto //設置溢出滾動 }
注:如若沒有反應,把外層view去掉
關于“怎么使用Flex布局實現頭部固定內容區域滾動”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。