高度不会设定父母的百分比

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值。

以下是与您类似的示例中使用的两个示例。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;