定義された最小の高さで拡張可能なCSSグリッドを作成する

Question

CSSの問題のうち、高さのパラメータは非常に簡単です。

私は、ExpressionEngine主導のクライアントウェブサイト用のカレンダーコンポーネントを開発しています。私はSolSpaceのカレンダープラグインを使用しています（これはバックエンドで素晴らしい、BTWです）、それに付属のテンプレートはテーブルベースです。

私はCSSベースのテンプレートを作っていましたが、私はセルの高さを管理する方法について固執しています。ここで

は、それが今のようになります。最初はhttp://cornerstonearts.hostasaurus.com/calendar

イベントの数が利用可能なスペースを超えたとき、彼らが拡大するように、私は細胞を設定します。 min-height:100%; overflow-y:hidden;

また、毎週の行を構成するDIVと月のコンテナに同じ設定を適用しました。

問題は、空のセルが完全に崩壊し、オーバーフローするセルが互いに独立して拡張されるという問題でした。後者は週の行を適切にオープンしていましたが、先日、その行のセルは展開されず、セルがいっぱいになりました。その結果、国境はすべて崩壊しました（添付資料参照）。

最小の高さを120pxに変更しましたが、その後は全く拡張しません。私もheight:120px; min-height:100%; overflow-y:hidden;の組み合わせを試しましたが、うまくいきませんでした。

セルを展開し、必要に応じて週の他の曜日を展開するが、空であれば最小の高さを保持するにはどうすればよいですか。

いつものように、私は何か助けに感謝しています。

おかげで、あなたはテンプレートがテーブルをベースとしていると言う

TY

Answer 1

。 HTMLテーブルを正確に意味していますか？もしそうなら、あなたのスクリーンショットにあるボーダーを<td>に置くことになります。

cssの問題は、個々の<div>は、お互いに入れ子になっていない限り、お互いの身長が何であるか分からないということです。

実際にはイベントカレンダーの場合は表形式のデータですが、それはイベントのテーブルです。テーブルそのものには何も問題はありません。人々のようにそれらを使用するだけで、昔はウェブサイト全体をレイアウトしていました。