jquery - 高度不会设置 parent 的百分比

Question

页脚容器

// Set Footer Size
var width = $(window).width();
var FooterHeight = width / 1.295;
$(".Footer").css({'height' : FooterHeight + 'px'});

页脚内容

.Footer .Content {
    position:absolute;
    margin-top: 52%;
    margin-left:3%;
    width:94%;
    height:48%;
    background:#FFFFFF;
    opacity:0.5;
}

问题我正在尝试使用最少的代码将页脚的内容设置为页脚高度和宽度的百分比。我尝试了几种从 StackOverflow 获取的方法，但我相信是由于 JQuery 设置了父级大小。

JSFiddle http://jsfiddle.net/qvj3qwjk/

所有变量都是正确的，因此应该如下所示:

Answer 1

如果将背景图像更改为 img 元素，则不必使用 jQuery 来设置页脚的高度。此外，如果您绝对定位元素，使用 top、right、bottom 和 left 会更容易> 属性。您可以为它们使用百分比或像素/em 值。

这是在与您的示例类似的示例中使用的这两个示例。

.Footer {
    position:relative;
}

.Footer img {
    width:100%;
    height:auto;
}

.Footer .Content {
	position:absolute;
	top:52%;
	left:3%;
	right:3%;
	bottom:3%;
	background:#FFFFFF;
	opacity:0.5;
}

<!-- Footer Starts -->
<div class="Footer">
    <img src="http://rafflebananza.com/Desktop/IMG/FooterBg.png">
    <div class="Content">
    </div>
</div>
<!-- Footer Ends -->