html - 如何在 Mithril.js 中获取浏览器高度以进行动态分配

Question

所以我有一个下拉菜单，并试图给它一个动态的高度；使用mithril.js怎么可能？

这是我到目前为止所尝试的：这是一段代码，我试图给列表一个动态高度。最终目标是让列表具有动态高度，以便在固定导航栏上使用overflow-y:scroll.

var h = window.innerHeight || document.documentElement.clientHeight|| document.body.clientHeight;

m("ul.nav-dropdown-menu", {
    style: { height: h+"px" },
    className: ctrl.isOpen ? 'is-open' : 'is-closed',
});

Answer 1

计算窗口/主体/元素大小必须在页面呈现后完成。您需要config在 Mithril 呈现页面后允许 DOM 操作的属性。你可以在这里阅读：http: //lhorie.github.io/mithril/mithril.html#the-config-attribute

你可以这样做：http: //jsbin.com/woxuku/1/edit ?js,output

App = {}

App.controller = function (attrs) {

}

App.view = function (ctrl, attrs) {
  return m("div.app", {
    style: {
      position: 'absolute',
      height: '300px',
      width: '400px',
      backgroundColor: 'lightblue'
    }
  }, [
    "navbar",
    m('nav', {
      style: {
        position: 'relative',
        backgroundColor: 'yellow'
      },
      config: function(el, isInit, context){
        el.style.height = ($('.app').getBoundingClientRect().height / 2).toString() + 'px'
        el.style.width = ($('.app').getBoundingClientRect().width / 2).toString() + 'px'
      }
    }, 'menu')
  ])
}

m.mount(document.body, App)