元素高度百分百解决方案

第一种:(推荐使用)
其实原理很简单:设置高度100%的前提是,父元素(父容器)必须有高度,html和body这两个特殊的元素初始化时并没有默认高度。
所以我们给根元素html和body元素设置height:100%(一定要两个元素都加上哦!),
然后再给目标元素设置height:100%,这时就会有效果了

第二种:
给元素添加 position:absolute;
神奇的事情发生了,height:100% 起作用了

第三种:
用js实现,这里为了省代码,所以用第三方jquery库

function resizeBackground(){
$('.content').css({
       'height': $(window).height()
 });
}
$(window).resize(function() {
    resizeBackground();
});
window.onload = function() {
   resizeBackground();
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注