height:100%について2、3件
4334 ワード
CSSのheight:100%では、親要素の高さとして自動的に埋め込まれます.しかし、このスタイルが機能しない場合があります.Mark downをクリックしてください.><
まず、以下のCSSコードを見てみましょう.
HTMLコード:
間違いなく、divのheight:100%は全く役に立たなかった(divの高さはpの高さと同じだと思っていたのに、bodyの高さがpに支えられて100%効いたので、ほほほ、too young too simple)、そして今思えば、height:100%効かず、完全に論理的だった.body元素はheightを設定していない場合、高さは適応的であるため、divのheight:100%が機能すれば、bodyの高さは必ず支えられ、このときbodyの高さ==divの高さ*2、divの様式はheight:100%であり、わが国の科学発展観に全く合致しない!!
この問題を解決するのも簡単です.次のCSSコードを追加します.
このように、要素が絶対ではなく、固定されている場合、height:100%が機能するには、その要素の親要素のheightを設定する必要があります.
では、今の問題は、なぜ親要素がheightを設定し、その子要素のheight:100%が機能するのかということです.
明らかに、親要素が高さを設定すると、その高さは固定値であり、あるサブ要素がheight:100%を設定しても高さは増加しません.また、ブラウザは要素のoverflowのデフォルト値がvisibleであるため、機能します.
次に、サブエレメントが絶対位置決めに設定されると、親エレメントが高さを設定していなくても、このサブエレメントのheight:100%が機能します.絶対位置決めのサブエレメントは親エレメントの高さと幅を広げないので、科学的な発展観に合っています!!!
応答式のレイアウトをしたことがある人はすべて知っていて、あるdivの高さはスクリーンの大きさによって変化すると思いますが、私はまたこのdivにいくつかのmarginあるいはpaddingの効果を持ってもらいたいと思っています.divは絶対的に位置決めした後、height:100%を設定して、marginあるいはpaddingを設定するといくつかのめちゃくちゃな質問があります.ソリューションは、次のコードで実装できます...
まず、以下のCSSコードを見てみましょう.
1 div {
2 height: 100%;
3 }HTMLコード:
1 <!doctype html>
2 <html>
3 <head></head>
4 <body>
5 <p> </p>
6 <div></div>
7 </body>
8 </html>間違いなく、divのheight:100%は全く役に立たなかった(divの高さはpの高さと同じだと思っていたのに、bodyの高さがpに支えられて100%効いたので、ほほほ、too young too simple)、そして今思えば、height:100%効かず、完全に論理的だった.body元素はheightを設定していない場合、高さは適応的であるため、divのheight:100%が機能すれば、bodyの高さは必ず支えられ、このときbodyの高さ==divの高さ*2、divの様式はheight:100%であり、わが国の科学発展観に全く合致しない!!
この問題を解決するのも簡単です.次のCSSコードを追加します.
1 htm, body {
2 height: 100%;
3 }このように、要素が絶対ではなく、固定されている場合、height:100%が機能するには、その要素の親要素のheightを設定する必要があります.
では、今の問題は、なぜ親要素がheightを設定し、その子要素のheight:100%が機能するのかということです.
明らかに、親要素が高さを設定すると、その高さは固定値であり、あるサブ要素がheight:100%を設定しても高さは増加しません.また、ブラウザは要素のoverflowのデフォルト値がvisibleであるため、機能します.
次に、サブエレメントが絶対位置決めに設定されると、親エレメントが高さを設定していなくても、このサブエレメントのheight:100%が機能します.絶対位置決めのサブエレメントは親エレメントの高さと幅を広げないので、科学的な発展観に合っています!!!
応答式のレイアウトをしたことがある人はすべて知っていて、あるdivの高さはスクリーンの大きさによって変化すると思いますが、私はまたこのdivにいくつかのmarginあるいはpaddingの効果を持ってもらいたいと思っています.divは絶対的に位置決めした後、height:100%を設定して、marginあるいはpaddingを設定するといくつかのめちゃくちゃな質問があります.ソリューションは、次のコードで実装できます...
1 div {
2 position: absolute;
3 height: auto;
4 left: 0;
5 top: 0;
6 right: 0;
7 bottom: 0;
8 margin: 20px;
9 }