2017-09-06 5 views
0

私の希望するレイアウトは、HTMLボディの高さ(50vh)と幅が50%で、幅が等しい2つのHTMLボディのボックス中心であり、いずれかの列の高さがその高さよりも大きくなると、垂直スクロールバーが表示されます。divと100%の高さで表示:グリッドが期待したとおりに動作しない

私には次のものがあります。fiddledisplay: grid divの左側の列には、IDが#col1となっています。私が気づいたのは、高さを100%に設定すると、その高さがテキスト内に収まるようになるということです。

なぜか分かりません。 #gridContainerは、その親の100%の高さがであると言っています。だから、の高さは100%で、それは親の#gridContainerと一致していませんか?

は私が#gridContainerセレクタにdisplay: blockdisplay: gridを変更した場合、私はheight: 100%ルールを#col1与えるかどうか、私は垂直スクロールバーを取得することに注意してください。

これは、CSSのグリッドが高さのCSSプロパティとやり取りする方法と関係していますか?

+0

あなたは何をしたいですか? –

+1

私は最初の段落で何をしたいかを言う。私は#col1に100%の高さを残すことができますが、それは私が望む効果があるようですが、なぜそれが動作するのかわかりません。だから私は何が起こっているのか知りたい。 –

+0

そのスクロール部分の仕組みを知りたいのですか?最初の列で...私は右です –

答えて

0

親の高さを50%に設定し、その下にcol1の高さが50%になっています。 ので、あなたのCSS

#col1 { 
overflow: scroll; 
width: 100%; 
//height: 100%; 
background-color: red; 
} 

はあなたの部門は50%の高さを持って、あなたはいつでも、コンテンツのサイズが大きくMORその後、スクロールバーがappers親に比べて50%以上のでoverflow:scrollを使用していました。それはすべてここで起こっている。

+0

2番目のものを同じにするには '' 'overflow:scroll'を使用してください''これを見てください:https://jsfiddle.net/mxubxpn7/ –

+0

はい、高さ:100%のコメントを外します。スクロールバーを表示すると表示されません。それは私が混乱していたものです。 –

+0

'' 'height:200px;' 'で動作しています。私はdivが全体の100%を取っていると思うので、フレックスを使用しているので何か原因があるかもしれません。それはちょうど箱から外に出ています –

関連する問題