導讀：自適應瀏覽器窗口高度的意思是，瀏覽器寬度、高度不同時，就顯示條件匹配的視圖頁面內容。本文作者分享了用Axure實現左側導航自適應瀏覽器窗口高度的實用方法，希望對大家有所幫助。
上一篇Axure教程《Axure教程：導航欄如何自適應瀏覽器窗口寬度？》，小默教給了大家頂部導航如何實現100%寬度，那麼就會有同學要問了，橫嚮導航能100%，那縱嚮導航也能100%嗎？這個問題問得很有深度，這一節就給大家講解一下左側導航欄怎樣實現100%高度的技巧。
閒話少說，且看下文。
01
第一步，拖動一個動態面板至頁面上，命名為「側欄」；設置它的x,y均為0，即是左上角對齊，並置於底層；然後設置動態面板的大小，寬度必須是實際導航的寬度，高度可隨意。
拖動動態面板至頁面上，命名為」側欄「
動態面板置於底層，x,y均為0，大小為300×170
02
第二步，在Axure右側工具欄裡的「屬性」，點擊<窗口尺寸改變時>，給當前頁添加用例。這回不是在動態面板上點擊右鍵選擇100%了，而是要運用到變量。
雙擊<窗口尺寸改變時>
03
第三步，在彈出窗口中的「添加動作」列裡，找到「設置尺寸」，點擊選中；在「配置動作」列，勾選側欄動態面板。
點擊選中」設置尺寸「
勾選側欄動態面板
04
第四步，重頭戲來了，先清空寬和高的數值，（寬為空或為300時，表示保持動態面板寬度的原值，就是第一步設置的300；當然也可以修改為其他值，但在生成頁面中是以修改值為實際寬度的。）然後點擊高的<fx>，對高進行變量設置。
清空寬高數值，點擊高的fx
05
第五步，接著重頭戲未完，在彈出窗口中點擊<插入變量或函數>，再在下拉菜單中選中<窗口>裡的<Window.height>，然後點擊窗口右下角的<確定>，設置完成。
點擊<Window.height>
06
通過前面5步設置，就可以實現的左側導航的100%高度了，但似乎我們忘了一點，那就是給動態面板設置背景顏色，這裡就不重複講了，因為在上一講已經有所提及，若有未學會的同學，可到B站搜索默林如斯工作室，前去學習視頻教程。下面附上最終效果圖，以結束本次教程。
最終效果圖
本文由 @默林如斯工作室 原創發布於人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議。