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

下面是一个非常基本的示例: https://ellie-app.com/k25rby75Da1/1

我在下面没有定义元素的高度,但您应该能够根据自己的需要计算出来。我将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)
     ]
   ]])