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

因此，我有一个下拉菜单，并且正在尝试为其设置动态高度；使用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',
});

最佳答案

渲染页面后必须计算窗口/主体/元素的大小。您需要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)

关于html - 人们如何在Mithril.js中获得浏览器高度以进行动态分配，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31776424/