下のdivに従って上のdivのサイズを変更する方法

Question

私は上のdivにチャートを、下のdivに各行の最後に4つの行が含まれています。閉じるアイコンをクリックすると閉じるアイコンが表示されます。残りの行は、CSSまたはjavascriptでそれを行う方法を残りのスペースを占有する必要がありますトップdivダウンする必要があります。私はAngular JSのng-repeatのコンセプトを使用して、行が繰り返されるようにしています。

Answer 1

以下の行数が変更される場合は、フレックスボックスの使用をおすすめします。 （チャートと行の両方をラップ）親のdivで ：

display: flex; 
flex-direction: column; 

とチャート-ラッパー上：これは、チャート・ラッパーのdivは、すべての残りのスペースを取るようになります

flex: 1 0 0%; 

親div。あなたはすでに、flexboxesについての詳細を読むためにいくつかの時間がかかるしていない場合は

-webkit-box-flex: 1 0 0%; 
-moz-box-flex: 1 0 0%; 
-webkit-flex: 1 0 0%; 
-ms-flex: 1 0 0%; 

：

display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 

-webkit-flex-direction: column; 
-moz-flex-direction: column; 
-ms-flex-direction: column; 
flex-direction: column; 

そして：あなたは、古いブラウザをサポートしたい 場合は、ベンダープレフィックスを忘れないでください。何人かの人々は、これが長年に渡ってCSSに追加された最高のものだと主張し、私は同意する必要があります。彼らはレイアウトの問題を多く解決します。