div内にあるULタグをdivの高さに継承しようとしています。ここで ULの継承Divの最小高さ/高さを作成する
は私のコードです：HTML：
<div class="xyz">
<ul id="abc">
<li><a href="#">Reviews</a></li>
<li><a href="#">Opinions</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
CSS：
.xyz {
min-height: 85%;
}
.xyz #abc{
min-height: inherit;
}
私はDIVからの高さを継承するか、少なくとも本部内％でそれを設定したいです
ご協力いただければ助かります。
をする必要があります反映する「ID」とCSSです。
.xyz {
min-height: 85%;
display: flex;
flex-direction: column;
}
.xyz #abc {
flex-grow: 1; /* Grow to fill available space */
}
/* Non-relevant styles: */
.xyz {
position: absolute;
top: 0; left: 0; right: 0;
border: 10px solid blue;
}
.xyz #abc {
border: 10px solid red;
width: 50%;
margin: 0;
}<div class="xyz">
<ul id="abc">
<li><a href="#">Reviews</a></li>
<li><a href="#">Opinions</a></li>
<li><a href="#">About</a></li>
</ul>
</div>素晴らしい！これは完全に動作します！ – rashmeePrakash
@rashmeePrakash FlexboxはIE10以降では動作しません。 –
あなたのul要素は、それが明確な高さは、#abcの縦の割合は動作しませんがない.xyzので、「＃」
.xyz #abc{ ....
申し訳ありませんが、それは何ですか...ここで私のコードを入力している間違いをしました – rashmeePrakash
あなたのdivは何に包まれていますか？正確に何の85％の高さ？ –
私は視差のウェブページを作っています。したがって、この視差のページには100％の最小高さがあり、その中に2つのdivを含むdivがあります。 class = "xyz"のものは85％に設定されていて、UL（id = "abc"）も％で特定の高さにしたいのですが、pxに設定した場合、そのサイズは画面のサイズ – rashmeePrakash
'ul'要素が "ABC" ではなく、クラスのIDを持っている：あなただけの完全
.xyzを埋めるために#abcをしたい場合はしかし、あなたはフレキシボックスを使用することができます。 '.xyz＃abc'セレクタでなければなりません – hackerrdave
これは何ですか...ここで自分のコードを入力している間に間違いました – rashmeePrakash
CSSの高さは、ドキュメントの通常の流れにある要素では機能しませんすべての親要素の高さも同様に設定されています。 –