css - 相対DIVには高さがありません

私のコードで何が間違っているのか分かりません。私はセクションの要素は高さを持って、私のDIV要素の表示値はdefinitlyブロックであり、私は実際にどのように動作し、どのように異なる位置にこれらの2つの要素を組み合わせるか分からない。今日何か新しいことを学ぶための解決策やアドバイスを教えてください。css - 相対DIVには高さがありません

div { 
 
    position: relative; 
 
    margin: 0 30%; 
 
} 
 

 
div section { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    height: 100px; 
 
    background-color: yellow; 
 
} 
 

 
hr { 
 
    height: 2px; 
 
    background-color: blue; 
 
}

<div> 
 
    <section></section> 
 
</div> 
 

 
<hr>

出典

2016-10-16 Anonymous

あなたの最終結果は何ですか？ – Cristian

問題は正確に何であり、結果として何を見たいのですか？ – Olga

私のdiv要素の高さが必要です –

を支援を期待するために、私は仮定のソリューションを提供

親のdivにはデフォルトのheight: autoプロパティがあるため、これは機能しません。
これは、親divが子の高さを持つことを意味します。
子にposition: absoluteを設定すると、このシステムが壊れています。
親はもう自分の子供を世話しません。（良くない）、親のdiv 上のカスタム高さ（height: 100px）を設定
- -
絶対位置を削除します。あなたはそれが動作するようにしたい場合は

だから、あなたは ソリューションを持っています子セクションの（デフォルト：position: relative）

div { 
 
    position: relative; 
 
    margin: 0 30%; 
 
} 
 

 
div section { 
 
    height: 100px; 
 
    background-color: yellow; 
 
} 
 

 
hr { 
 
    height: 2px; 
 
    background-color: blue; 
 
}

<div> 
 
    <section></section> 
 
</div> 
 

 
<hr>

出典

2016-10-16 08:59:44 C0ZEN

nice expication（y）thanks –

あなたは大歓迎です。 – C0ZEN

あなたの要素がAUTOに設定され、高さがあります。 divの高さを変更したい場合は、これをcssで書く必要があります。

div { 
    position: relative; 
    margin: 0 30%; 
    height: 200px; 
    background-color: red; 
}

出典

2016-10-16 08:45:02

私はあなたのdivは、それが表示されていないと、それはsectionで、absoulute位置にあり、その子要素に応じて増加している理由です何の高さ自体を持っていないので、これがあると思います。あなたが何をしているのかは分かりませんが、div内のセクションをdivの高さとともに表示したい場合は、divのCSSを含める必要があります。

あなたはそれがあなたは右、最初のdivの下に自分の時間をしたいですか？あなたの

div { 
 
    position: relative; 
 
    margin: 0 30%; 
 
    background-color: green; 
 
    height: 150px; 
 
} 
 
section { 
 
    position: absolute; 
 
    top: 50px; 
 
    right: 0; 
 
    left: 0; 
 
    height: 50px; 
 
    background-color: yellow; 
 
} 
 
div hr { 
 
    height: 10px; 
 
    background-color: red; 
 
}

<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <div> 
 
    <p>your div</p> 
 
    <hr> 
 
    <section>your section</section> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-10-16 08:57:45

css - 相対DIVには高さがありません

答えて

関連する問題