保证金顶部：100％获得父宽度值...奇怪

我在大多数浏览器（即ff，chrome，safari）上都有很奇怪的问题。下面是示例代码：保证金顶部：100％获得父宽度值...奇怪

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
     html{ 
      outline: 1px #0ff solid; 
      background: rgba(0,255,255,0.1); 
     } 
     body{ 
      margin: 0; 
      padding: 0; 
      outline: 1px #00f solid; 
      background: rgba(0,0,255,0.1); 
     } 
     #aDiv{ 
      width: 300px; 
      outline: 1px #f00 solid; 
      background: rgba(255,0,0,0.2); 
     } 
     #bDiv{ 
      margin-top: 100%; 
      outline: 1px #0f0 solid; 
      background: rgba(0,255,0,0.1); 
     } 
    </style> 
</head> 
<body> 
    <div id="aDiv"> 
     <div id="bDiv"> 
      content 
     </div> 
    </div> 
</body> 
</html>

当改变#aDiv宽度，然后#bDiv边距将与相同的值而改变。我不知道它是如何可能的，高度达到宽度。无论如何，也许你可以向我解释发生了什么事？

最好的问候;）

来源

2011-10-05 Artnova Art

这实际上是according to the spec

<百分比>百分比相对于的所生成的框的包含块的宽度来计算。请注意， 'margin-top'和'margin-bottom'也是如此。如果包含块的宽度取决于此元素，则生成的布局在CSS 2.1中未定义为。

漂亮没用，对不对？您是否考虑过使用position: absolute和bottom: 0？他们可能更多的是你要找的东西。

来源

2011-10-05 13:04:07

我当时的工作完全不同，但是因为浏览器并不总是按预期工作，所以我测试了完全随机的属性，作为边缘顶端：100％有点傻。我在（垂直）margin-top/margin-bottom和（horizontal）width之间得到了奇怪的相关性。正如你所说，相当无用;） –

不幸的是，它符合标准，但祝你好运。 –

什么样的白痴把这个标准..这是......几乎令人难以置信的愚蠢，基于水平值的垂直百分比。 – Noishe

#bDiv{ 
     margin-top: 100%; --> This need to change 
     outline: 1px #0f0 solid; 
     background: rgba(0,255,0,0.1); 
    }

它不是一个奇怪的问题。这是因为您已将margin-top设置为100％，因为aDiv是bDiv的父级，因此其宽度为aDiv为margin-top。

来源

2011-10-05 13:03:26

我很清楚如何消除这个问题，但是我对原因感到好奇，为什么垂直百分比从横向父宽度获得价值。这是毫无意义的...... –

这一切都与你的CSS上BDIV有margin-top: 100%;

做如果删除此，一切行为恢复正常。

来源

2011-10-05 13:06:52 Luke

我很清楚如何消除这个问题，但是我很好奇原因，为什么垂直百分比从横向父宽度获得价值。这个不成立... –

感谢队友，请参考Kasun的回答 – Luke

您可以尝试视口相对单位（1vw =视口宽度的1％，1vh =视口高度的1％）。

试过margin-top: 90vh;？

来源

2015-01-21 21:47:08 cptstarling

，我必须更多地使用这个值！ – domiSchenk

保证金顶部：100％获得父宽度值...奇怪

回答

相关问题