Elm中使用Style Elements实现无滚动单页应用布局问题咨询

我最近在开发自己的第一个Elm应用，决定弃用传统CSS，改用Style Elements包来处理样式——毕竟它能让样式和视图逻辑更紧密地结合在一起。目前我正在尝试实现一个无滚动的单页应用布局，下面是我已经写好的部分视图代码：

-- 主视图函数
view : Model -> Html Msg
view model = layout Styles.stylesheet <| pageWrapper

-- 页面容器：占满整个视口的列布局
pageWrapper : Element Styles variation Msg
pageWrapper = column Page [ width (percent 100), height (percent 100) ] [ navMain , contentArea ]

-- 主导航栏：横向分布的行布局
navMain : Element Styles variation Msg
navMain = row Navigation [ spread, padding 10 ] 
    [ el (NavigationItem []) (text "Home")
    , el (NavigationItem []) (text "About")
    , el (NavigationItem []) (text "Contact")
    ]

目前这个布局的核心思路是让pageWrapper占满100%的视口宽高，内部用列布局拆分导航栏和内容区域，确保所有内容都能在视口范围内展示，不会出现滚动条。

内容的提问来源于stack exchange，提问作者Joe Marion