私の希望するレイアウトは、HTMLボディの高さ(50vh)と幅が50%で、幅が等しい2つのHTMLボディのボックス中心であり、いずれかの列の高さがその高さよりも大きくなると、垂直スクロールバーが表示されます。divと100%の高さで表示:グリッドが期待したとおりに動作しない
私には次のものがあります。fiddledisplay: grid
divの左側の列には、IDが#col1
となっています。私が気づいたのは、高さを100%
に設定すると、その高さがテキスト内に収まるようになるということです。
なぜか分かりません。 #gridContainer
は、その親の100%
の高さがであると言っています。だから、の高さは100%
で、それは親の#gridContainer
と一致していませんか?
は私が#gridContainer
セレクタにdisplay: block
にdisplay: grid
を変更した場合、私はheight: 100%
ルールを#col1
与えるかどうか、私は垂直スクロールバーを取得することに注意してください。
これは、CSSのグリッドが高さのCSSプロパティとやり取りする方法と関係していますか?
あなたは何をしたいですか? –
私は最初の段落で何をしたいかを言う。私は#col1に100%の高さを残すことができますが、それは私が望む効果があるようですが、なぜそれが動作するのかわかりません。だから私は何が起こっているのか知りたい。 –
そのスクロール部分の仕組みを知りたいのですか?最初の列で...私は右です –