前の要素の高さを取得

CSSだけを使って前の要素の高さを取得できますか？私は前の要素の高さを知っておく必要がありますのdiv B.前の要素の高さを取得

#b{ 
    height:calc(100vh - heightOfPreviousElement); 
}

の動的高さを設定するCALC（）関数を使用しています。私が知っている

は、100VHは、画面の高さの100％に等しいことです。

私は一つの問題を持っている、フレックスbelow.Using答えに

をコードを使用していました。オレンジ色の高さは小さくなります。

出典

2016-04-03 JMA

それは私にはXYの問題のように聞こえます。おそらく、別の要素（兄弟）に基づいて高さを調整するだけなので、フレックスボックスのような他の方法を使ってレイアウトを作成することもできます。残念ながら、CSSは以前の要素や親を選択することを許可していません（したがって**カスケード**という名前）。視覚的にどのようなレイアウトを実現したいか、コードのスニペットなど、より詳細な情報を含めるように質問を更新してください。非常に役立ちます。 – Terry

可能な複製：http://stackoverflow.com/q/33129660/3597276 –

あなたはflexboxを使用して探している効果を簡単に達成できます。

flex-grow: 1; 
flex-shrink: 1; 
flex-basis: auto;

プルーフオブコンセプトコードスニペットを参照：トリックは、単に速記のためであるflex: 1 1 autoを使用して、必要が生じたときはいつでも青い容器（柔軟高さを有するもの）はサイズが成長できるようにすることです以下の下：

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: no-wrap; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 100vh; 
 
} 
 
.wrapper > div { 
 
    width: 100%; 
 
} 
 
#c1 { 
 
    background-color: #880015; 
 
    color: #fff; 
 
    height: 60px; 
 
    margin-bottom: 10px; 
 
} 
 
#c2 { 
 
    background-color: #ff7f27; 
 
    } 
 
#c3 { 
 
    background-color: #00a2e8; 
 
    flex: 1 1 auto; 
 
    margin-bottom: 10px; 
 
    }

<div class="wrapper"> 
 
    <div id="c1">height: 60px</div> 
 
    <div id="c2">height: auto (determined by content?)</div> 
 
    <div id="c3">flexible height</div> 
 
</div>

出典

2016-04-03 20:31:13 Terry

このコードを使用しましたが、問題があります。更新された質問を参照してください。 – JMA

@JohnArellanoそれはあなたがそれらのすべてを含むための十分な高さを持っていないためです。これが起こると、可撓性要素が寸法的に崩壊する。 'flex-shrink：0'（これはデフォルトでは' 1 '）を設定することでこれを防ぐことができます。 – Terry

いいえいいえ、CSSで前の要素を選択することはできません。

JQuery Prev OR Parents.css()メソッドを使用して前の要素を選択して高さを適用する方法はありますか？

出典

2016-04-03 16:44:31

前の要素の高さを取得

答えて

関連する問題