带有 Foundation SCSS 的全屏 7x5 网格答案

【问题标题】：Full screen 7x5 grid with Foundation SCSS带有 Foundation SCSS 的全屏 7x5 网格
【发布时间】：2023-03-29 16:01:01
【问题描述】：

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

通过在 _settings.scss 中更改它，我已经设法使用 Foundation SCSS 使其全宽：

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

我的主要问题是 - 创建 5 行（单月始终为 5 行）始终占据屏幕剩余高度的最佳方式是什么？（由于顶部栏导航是固定的）。

我对 SCSS 没意见，所以欢迎所有建议。

谢谢！

【问题讨论】：

听起来您使用了错误的标记，因为您知道，日历是表格数据。
是的，但我不确定表格的响应性如何？另一个问题是 - 如何使表格成为屏幕的全高减去顶栏高度

标签： css sass zurb-foundation

【解决方案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);

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

谢谢。

【讨论】：