Closed
Bug 1119732
Opened 11 years ago
Closed 11 years ago
calc() use percent of parent width instead of parent height
Categories
(Firefox :: Untriaged, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: vuk.kulvar, Unassigned)
Details
(Keywords: css3)
User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0
Build ID: 20141126041045
Steps to reproduce:
Informations :
Windows 8.1 64bits
Firefox 34.0.5
Screen 1920x1080
Web window size 1900x920
The html file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style>
* {
box-sizing : border-box;
padding : 0;
margin : 0;
}
html {
height : 100%;
}
body {
min-height : 100%;
padding : 1px;
}
#page {
width : 800px;
height : 600px;
margin : calc(50% - 300px) auto 0;
padding : 30px;
}
</style>
</head>
<body>
<div id="page"></div>
</body>
</html>
Actual results:
div#page margin-top
calc(50% - 300px) = 650px
Effective calculation : ((1900 / 2) - 300) = (950 - 300) = 650
Expected results:
div#page margin-top
calc(50% - 300px) = 160px
Expected calculation : ((920 / 2) - 300) = (460 - 300) = 160
|
||
Comment 1•11 years ago
|
||
This is per spec in CSS 2.1:
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
http://www.w3.org/TR/CSS2/box.html#margin-properties
So it doesn't sound like a bug to me.
Status: UNCONFIRMED → RESOLVED
Closed: 11 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•