css - CSS: 高さ:100% vs 下:0

Question

次の本質的な違いは何ですか:

position: absolute;
top: 0;
height: 100%;

と

position: absolute;
top: 0;
bottom: 0;

Answer 1

子要素の高さは、プロパティごとに異なる方法で決定されます。

bottom: 0=> child_height = parent_height - child_margin - child_border

height: 100%=> child_height = 親の高さ

つまり、子height: 100%の内側の高さbottom: 0を親と同じ高さに設定し、子の外側の高さを親と同じ高さに設定します。

例: http://jsfiddle.net/2N4QJ/1/

位置/次元の詳細: http://msdn.microsoft.com/en-us/library/ms530302(VS.85).aspx

Answer 2

height100％に設定するとドキュメントの高さに設定されtop、bottom0に設定すると、要素が画面の上下に配置されるように設定され、視覚的に同じことが行われます。ただし、一部の古いブラウザはheight100％に設定することを「好む」場合があります。