Margin-top: 100% получает значение родительской ширины ... странно - PullRequest
Новая
       7

Margin-top: 100% получает значение родительской ширины ... странно

7 голосов
/ 05 октября 2011

У меня очень странная проблема в большинстве браузеров (например, ff, chrome, safari).Вот пример кода: 

<!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 margin-top будет меняться с тем же значением.Я не знаю, как это возможно, что высота переходит в ширину.В любом случае, может быть, один из Вас мог бы объяснить мне, что происходит?

С наилучшими пожеланиями;)

D.

Ответы [ 4 ]

12 голосов
/ 05 октября 2011

Это на самом деле в соответствии со спецификацией

Процент рассчитывается относительно ширины содержащего блока сгенерированного блока.Обратите внимание, что это верно и для 'margin-top' и 'margin-bottom'.Если ширина содержащего блока зависит от этого элемента, то результирующий макет не определен в CSS 2.1.

Довольно бесполезно, верно?Вы рассматривали возможность использования position: absolute и bottom: 0?Они могут быть больше того, что вы ищете.

8 голосов
/ 22 января 2015

Вы можете попробовать относительные единицы просмотра области (1vw = 1% ширины области просмотра, 1vh = 1% высоты области просмотра).

Tried margin-top: 90vh;?

4 голосов
/ 05 октября 2011 
#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.

1 голос
/ 05 октября 2011

Все это связано с вашим CSS на bDiv, имеющим margin-top: 100%;

Если вы удалите это, все снова будет работать нормально.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...