Margin-top：100％获取父宽度值...奇怪

本文介绍了Margin-top：100％获取父宽度值...奇怪的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有很奇怪的问题，在大多数浏览器（即ff，chrome，safari）。
以下是示例代码：

 <！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> 
< html xmlns =http://www.w3.org/1999/xhtml> 
< head> 
< meta http-equiv =Content-Typecontent =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 margin-top会以相同的值更改。
我不知道怎么可能，那个高度到宽度。

最好的问候;）

D。

解决方案

这实际上是

很无用，对不对？您是否考虑过使用 position：absolute 和 bottom：0 ？他们可能更多的是你要找的。

I have very strange "issue", on most browsers (ie, ff, chrome, safari).Here is example code:

<!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>

When You change #aDiv width, then #bDiv margin-top will change with same value.I dont know how it is possible, that height goes to width. Anyway maybe one of You could explain me whats going on?

Best regards ;)

解决方案

This is actually according to the spec

Pretty useless, right? Have you considered using position: absolute and bottom: 0? They might be more of what you're looking for.

这篇关于Margin-top：100％获取父宽度值...奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！