移动端页面如何实现背景图在没有内容时在一屏显示?

一个内容详细页面底部的背景中有个图片,如果内容多的话(文字超过一屏)背景就会顺利展示,如果文字少的话就撑不起来这个背景。我只好设置这个页面最小为一屏高度

<html>
<head></head>
<body>
<div class="container-show">
</div>
</body>
</html>

html,body{height:100%;}
.container-show{min-height:100%}

我的所有页面都是用的一个css文件,直接把
html,body{height:100%;}
放到css文件中,会不会影响的其他页面?有没有更好的方法?

阅读 5.5k
2 个回答

我问一下楼主,你是指要背景只能一频?即假设内容有两屏,背景也只能一屏?那多出来的那一屏怎么办?默认为灰色?如果确实要这样的效果,你可以定位一个div(和你的.container同级),然后设置min-height:100%;position:absolute;background:url() no-repeat;z-index-10;就可以了,那个背景永远只有一屏,无论你的内容有多少

可以通过js获取窗口高度来设置div高度。

var H = $(window).height();
$('.H').css('min-height',H+'px');

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题