带有样式元素和Elm的布局问题

我正在Elm中构建我的第一个应用程序，并决定使用样式元素包而不是CSS

这就是我正在尝试的布局。它是一个单页应用程序，不会滚动

这里有一些代码

view : Model -> Html Msg
view model =
    layout Styles.stylesheet <|
        pageWrapper


pageWrapper : Element Styles variation Msg
column Page
    [ width (percent 100), height (percent 100) ]
    [ navMain
    , contentArea
    ]


navMain : Element Styles variation Msg
navMain =
    row Navigation
        [ spread, padding 10 ]
        [ el (Nav Logo) [ width (px 50)] (text "Logo")
        , row (Nav Link)
            [ padding 15, spacing 10]
            [ el (Nav Link) [] (text "About")
            , el (Nav Link) [] (text "Services")
            , el (Nav Link) [] (text "Team")
            , el (Nav Link) [] (text "Location")
            , el (Nav Link) [] (text "Contact")
            ]
    ]


contentArea : Element Styles variation Msg
contentArea =
    -- At this point I thought I would make a row with an el with the image 
       and a column containing the other two images. And other than creating heights with pixels I don't know how to extend the main content to the bottom of the page.

view:Model->Html消息
视图模型=
layout Styles.stylesheet下面是一个非常基本的示例：

我在下面没有定义元素的高度，但您应该能够根据自己的需要计算出来。我将ellie链接更新为一个版本，我认为它更接近您示例中的高度

module Main exposing (main)

import Html
import Html.Attributes
import Color
import Style
import Style.Font as Font
import Style.Color as Color
import Element exposing (..)
import Element.Attributes exposing (..)


main =
    Html.beginnerProgram
        { model = model
        , update = update
        , view = view
        }

type alias Model =
  { navbar : String
  , leftcontent : String
  , rightcontent : { top : String, bottom : String }
  }

model : Model
model =
  { navbar = "This is the navbar"
  , leftcontent = "This is the left column content"
  , rightcontent =
    { top = "This is the right top content"
    , bottom = "This is the right bottom content"
    }
   }



update model msg = 
     model

type MyStyles = Navbar | Left | RightTop | RightBottom | None

stylesheet =
    Style.styleSheet
        [ Style.style Navbar [ Color.background Color.red ]
        , Style.style Left [ Color.background Color.blue ]
        , Style.style RightTop [Color.background Color.purple ]
        , Style.style RightBottom [Color.background Color.gray ]
        ]

view model =
 Element.viewport stylesheet <|
   (column None [] [
   row Navbar [] [ text model.navbar ]
   , wrappedRow None []
   [ column Left [ width (percent 50)] [ text model.leftcontent ]
   , wrappedColumn None [ width (percent 50)] 
     [ el RightTop [ width fill] (text model.rightcontent.top)
     , el RightBottom [ width fill ] (text model.rightcontent.bottom)
     ]
   ]])

模块主显示（主）
导入Html
导入Html.Attributes
进口颜色
导入样式
导入样式。字体作为字体
导入样式。颜色作为颜色
导入元素公开（…）
导入元素。属性公开（..）
主要=
初学者程序
{model=model
，update=update
，视图=视图
}
类型别名模型=
{navbar:String
，leftcontent:String
，rightcontent:{top:String，bottom:String}
}
型号：型号
模型=
{navbar=“这是navbar”
，leftcontent=“这是左列内容”
，rightcontent=
{top=“这是右上方的内容”
，bottom=“这是右下角的内容”
}
}
更新模型消息=
模型
键入MyStyles=Navbar |左|右上|右下|无
样式表=
样式表
[Style.Style导航栏[Color.background Color.red]
，Style.Style Left[Color.background Color.blue]
，Style.Style RightTop[Color.background Color.purple]
，Style.Style RightBottom[颜色.背景色.灰色]
]
视图模型=
Element.viewport样式表您的内容区应该是这样的：
wrappedRow Style[][column Style[][left content]，wrappedRow Style[][el Style[]（），el Style[]（）][/code>谢谢！这帮助我想出了如何更好地考虑它的方法，现在我已经能够使布局更合理。