Quasar q-page-containerの子供に祖父母の完全な高さを使用させる方法は？

Question

クエーサーのレイアウトと、q-page-container要素の高さを100％使用する必要のあるコンポーネントがあります。問題は、コンテナーが完全に拡張して高さ全体をカバーしていないことです（絶対配置を使用して行うドロワーとは異なります）。

この問題に取り組むために私が見たすべてのCSSトリックは、親コンテナーのプロパティに干渉します。これは、内部のQuasarレイアウトに必要なプロパティを壊さないようにするために行うのを嫌がります。コンテナの子divをheight: 100%に設定しても影響はありません。100pxなどの絶対値に設定しても高さは正しく設定されますが、ブラウザに合わせる必要がありますビューポート。

説明のためにフィドルを設定しました ここでの問題 。

この場合、#troublemakerでコンテナの高さ全体を埋めるようにします。つまり、親コンテナは内部のコンテンツに展開されるだけなので、祖父母からヘッダーの高さを差し引いたものです。

PS：CSSのレイアウトと配置は常に直感に反しているように思われるので、そのロジックをよりよく理解する方法を学ぶためにリソースについて何か良いアドバイスがあれば、私はそれを非常に感謝します！

Answer 1

q-page内にdivがある場合、divにmin-heightコンポーネントからq-page CSSプロパティを継承させるのが適切な方法です。

私はそれを示すためにフィドルを更新しました： https://jsfiddle.net/u39qbrpj/4/

#troublemaker {
  min-height: inherit;
  background-color: green;
}