以下两者的本质区别是什么:
position: absolute; top: 0; height: 100%;
和
position: absolute; top: 0; bottom: 0;
7d7tgy0s1#
对于每个属性,子元素的高度是不同的:bottom: 0 => child_height = parent_height - child_margin - child_borderheight: 100% => child_height = parent_height换句话说,height: 100%将子对象的 * 内部高度 * 设置为其父对象的相同高度,而bottom: 0将子对象的 * 外部高度 * 设置为其父对象的相同高度。https://jsfiddle.net/2N4QJ/1/示例
bottom: 0
height: 100%
.parent { width: 100px; height: 300px; position: relative; background: #ccc; display: block; float: left; padding: 10px; margin: 20px } .parent > div { display: block; margin: 10px; background: red; position: absolute; color: white !important; } #c1 { top: 0; background-color: green; height: 100%; } #c2 { top: 0; background-color: blue; bottom: 0; }
<div class="parent"> <div id="c1">height: 100%, margin: 10px</div> </div> <div class="parent"> <div id="c2">bottom: 0, margin: 10px</div> </div>
关于位置/尺寸的更多信息:http://msdn.microsoft.com/en-us/library/ms530302(VS.85).aspx (archive link)
8nuwlpux2#
简单地说,height设置为100%会将其设置为文档高度,而如果您将top和bottom设置为0,它将设置为将元素与屏幕的顶部和底部对齐,它将在视觉上做同样的事情,尽管一些旧浏览器可能“更喜欢”height设置为100%。
height
top
bottom
2条答案
按热度按时间7d7tgy0s1#
对于每个属性,子元素的高度是不同的:
bottom: 0
=> child_height = parent_height - child_margin - child_borderheight: 100%
=> child_height = parent_height换句话说,
height: 100%
将子对象的 * 内部高度 * 设置为其父对象的相同高度,而bottom: 0
将子对象的 * 外部高度 * 设置为其父对象的相同高度。https://jsfiddle.net/2N4QJ/1/示例
关于位置/尺寸的更多信息:http://msdn.microsoft.com/en-us/library/ms530302(VS.85).aspx (archive link)
8nuwlpux2#
简单地说,
height
设置为100%会将其设置为文档高度,而如果您将top
和bottom
设置为0,它将设置为将元素与屏幕的顶部和底部对齐,它将在视觉上做同样的事情,尽管一些旧浏览器可能“更喜欢”height
设置为100%。