起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識Axure教程：左側(cè)導航如何自適應瀏覽器窗口高度？
導讀：自適應瀏覽器窗口高度的意思是，瀏覽器寬度、高度不同時，就顯示條件匹配的視圖頁面內(nèi)容。本文作者分享了用Axure實現(xiàn)左側(cè)導航自適應瀏覽器窗口高度的實用方法，希望對大家有所幫助。
上一篇Axure教程《Axure教程：導航欄如何自適應瀏覽器窗口寬度？》，小默教給了大家頂部導航如何實現(xiàn)100%寬度，那么就會有同學要問了，橫向?qū)Ш侥?00%，那縱向?qū)Ш揭材?00%嗎？這個問題問得很有深度，這一節(jié)就給大家講解一下左側(cè)導航欄怎樣實現(xiàn)100%高度的技巧。
閑話少說，且看下文。
01
第一步，拖動一個動態(tài)面板至頁面上，命名為“側(cè)欄”；設置它的x,y均為0，即是左上角對齊，并置于底層；然后設置動態(tài)面板的大小，寬度必須是實際導航的寬度，高度可隨意。
拖動動態(tài)面板至頁面上，命名為”側(cè)欄“
動態(tài)面板置于底層，x,y均為0，大小為300×170
02
第二步，在Axure右側(cè)工具欄里的“屬性”，點擊<窗口尺寸改變時>，給當前頁添加用例。這回不是在動態(tài)面板上點擊右鍵選擇100%了，而是要運用到變量。
雙擊<窗口尺寸改變時>
03
第三步，在彈出窗口中的“添加動作”列里，找到“設置尺寸”，點擊選中；在“配置動作”列，勾選側(cè)欄動態(tài)面板。
點擊選中”設置尺寸“
勾選側(cè)欄動態(tài)面板
04
第四步，重頭戲來了，先清空寬和高的數(shù)值，（寬為空或為300時，表示保持動態(tài)面板寬度的原值，就是第一步設置的300；當然也可以修改為其他值，但在生成頁面中是以修改值為實際寬度的。）然后點擊高的<fx>，對高進行變量設置。
清空寬高數(shù)值，點擊高的fx
05
第五步，接著重頭戲未完，在彈出窗口中點擊<插入變量或函數(shù)>，再在下拉菜單中選中<窗口>里的<Window.height>，然后點擊窗口右下角的<確定>，設置完成。
點擊<Window.height>
06
通過前面5步設置，就可以實現(xiàn)的左側(cè)導航的100%高度了，但似乎我們忘了一點，那就是給動態(tài)面板設置背景顏色，這里就不重復講了，因為在上一講已經(jīng)有所提及，若有未學會的同學，可到B站搜索默林如斯工作室，前去學習視頻教程。下面附上最終效果圖，以結束本次教程。
最終效果圖
作者：默林如斯；公眾號：默林如斯
本文由 @默林如斯工作室 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議。
實際工作中，誰會用到啊，有那功夫不如研究業(yè)務流程。。。。
你說的話都對不起你的用戶名
做后臺原型這個很實用啊，哪里用不到了