Как получить высоту браузера в 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',
});
1 ответ
Вычисление размеров окна / тела / элемента должно быть выполнено после отображения страницы. Вам понадобится config
атрибут, который позволяет манипулировать DOM после того, как Mithril рендерит страницу. Вы можете прочитать о здесь: http://lhorie.github.io/mithril/mithril.html
Вы можете сделать что-то вроде этого: 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)