残りの画面スペースの高さを埋めるようにdivを取得しようとしていましたが、ここで優れた答えが見つかりました：Make a div fill the height of the remaining screen space（選択された回答）。パス内のすべてのノードのCSSセレクタ
https://stackoverflow.com/users/1490904/pebblの私の問題は、コンテンツのフレックスコンテナがheight:100%であり、height:100%のhtmlとbody要素の直接の子であることです。私のアプリでは、ボディと私のフレックスコンテナの間に多数の介在要素があり、フレックスコンテナが利用可能なすべての垂直スペースを埋めるようにするには、これらの各要素もheight:100%でなければなりません。
私はちょうど
* {
height: 100%;
}
のようなCSSルールを持っていますが、それは右、クレイジーだ場合、それは素晴らしい作品？ DOM内のすべての要素を100％に設定するのが問題であるかどうかはわかりませんが、必要がなければむしろそうしたいと思います。 （ボディと私のフレックスボックス間のすべての要素を選択することになり、これを考えて）
私が試した：運と
body * .flex-box {
height: 100%;
}
。
（反応によって処理された後）私のHTMLは同様の一種になります。
<html>
<body>
<div>
<div class="another-div">
<div class="another-div navbar-and-whatnot">
<div class="yet-another-bunch-of-divs">
<div class="flex-box">
<div class="flex-remaining-height">
<svg class="this-should-be-big" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
と（パスに沿って高さを設定するための非稼働の試みを含む）私のSCSSファイルの関連部分は次のとおりです。
html, body {
height: 100%;
}
body * .flex-box { // this part doesn't work. the rest comes from https://stackoverflow.com/a/24979148/1368860
height: 100%;
}
.flex-box {
display: flex;
flex-flow: column;
height: 100%;
//.flex-row { border: 1px dotted grey; }
.flex-content-height {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.flex-remaining-height {
flex: 1 1 auto;
}
.flex-fixed-height-40 {
flex: 0 1 40px;
}
}
今のところ、bodyとフレックスボックスの間のすべての要素を見つけ出し、高さを設定することができますが、かなり壊れやすいものです。私は常にそれを修正する必要があります。
私は反応ブートストラップを使用しています。そのように単純な解決策があれば、私はそれを取るでしょう。
さらに、私がやりたかったのは、周囲のdivほど大きなSVG要素を作成するライブラリを使用していて、SVGを可能な限り大きくしたい画面上）。
P.P.S. jqueryもロードされています。私はそれが一番簡単な修正だと思う。それでも、CSSソリューションがあればうれしいです。
私たちにあなたのコードを教えてください。それがなければあなたを助けることは不可能です –
それを行いました。ありがとう。 – Sigfried