带有Foundation SCSS的全屏7x5网格

时间:2015-04-25 15:56:57

标签: css sass zurb-foundation

希望这里有人做了我目前正在努力完成的事情。我正在学习一些新的JS框架,并且我已经想到制作全屏日历,并将topbar固定为我的主页。此日历应采用普通显示器上的全宽和全高。

我通过在_settings.scss中更改此设置,使用Foundation SCSS设法使其达到全宽:

$row-width: 100%;
$total-columns: 7;

我的主要问题是 - 创建5行(单个月总是5行)的最佳方式是什么?它总是占据屏幕的完整剩余高度? (剩下的原因是固定的顶部导航)。

我对SCSS没问题,所以欢迎所有建议。

谢谢!

1 个答案:

答案 0 :(得分:-1)

好的,有效的解决方案是:

// Get client height (screen height)
var maxHeight = window.innerHeight;
var topbarHeight = $('div.fixed').height();
var columnHeight = (maxHeight - topbarHeight - 10) / 5;
$('.calendar-row .column').height(columnHeight);

我个人认为必须有更“优雅”的解决方案,但也许我错了。如果有人找到更好的解决方案,请回复。

感谢。