Question

我希望元素的margin-top为父元素高度的百分比。

例如，如果我有高度为100px的div，我想在其内部创建具有margin-top：25px的ap元素，除非将p元素的边距设置为％，以便它可以处理其父级改变高度。

编辑：对于那些认为显而易见的人 - 你不能使用保证金最高限额：25％。除了高度使用父元素的宽度之外，框模型的百分比为％。因此，如果使用margin-top：25％，则将其设置为父div宽度的25％。

Answer 1

这是我认为的解决方案之一：

 <div style="height:100px; background-color:red; color:white; position:relative;">
     <div style="top: 25%;position: absolute;">
         <p> I want an elements margin-top to be a % of t</p>
     </div>
 </div>

Answer 2

尝试定位元素而不是给它一个边距，如下所示：

p {
  position: relative;
  top: 50%;
}

Demo for reference

Answer 3

您可以使用JS在渲染后调整父元素的高度（offsetHeight），然后将其除以4并将结果分配给childs top或marginTop属性。

var parent = document.getElementById("parent");
var child = document.getElementById("child");
var marginVal = (parent.offsetHeight)/4;
child.style.top = marginVal+"px";

小提琴：http://jsfiddle.net/Nillervision/AwqJK/

如果你将js包装在一个函数中，你可以在加载页面时调用它（window.onload），当浏览器调整大小时，如果它改变了父元素的大小（window.onresize）

将margin-top设置为父元素高度的％

3 个答案: