显示全屏图像100%的高度和100%的宽度，但能够向下滚动
显示全屏图像100%的高度和100%的宽度，但能够向下滚动
提问于 2013-10-21 15:14:30
我想要创建一个全屏图像，让我向下滚动页面，如苹果网站在这里。
http://www.apple.com/uk
您会注意到，通过调整浏览器的大小，图像将保持全屏，但它允许您向下滚动到页脚。
这可以在jquery中完成，还是需要javascript？
到目前为止，我仅有的一段代码是使图像全屏的css代码：
.content {
height:100%;
width:100%;
background: url("http://america.aljazeera.com/content/ajam/watch/shows/the-stream/the-stream-officialblog/2013/9/16/indiana-ag-callsfordrugtestingofpregnantwomen/jcr:content/blog/mainpar/adaptiveimage/src.adapt.960.high.1379636395676.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}这是小提琴，小提琴，http://jsfiddle.net/XXHgJ/
如果您向下滚动页脚显示，但菜单保持不变，这需要滚动向上。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-10-21 15:16:53
如果您只想创建一个全屏元素，可以使用jQuery：
jQuery:
function setDimensions(){
var windowsHeight = $(window).height();
$('#element').css('height', windowsHeight + 'px');
}
//when resizing the site, we adjust the heights of the sections
$(window).resize(function() {
setDimensions();
});
setDimensions();CSS
.content {
background-image: url(yourURL);
background-size:cover;
}生活演示：http://jsfiddle.net/XXHgJ/7/
Stack Overflow用户
发布于 2013-10-21 15:56:10
是这样的吗？我是用纯css做的，因为我密切注意到，当页面调整大小时，对于苹果来说，图像大小并不一定改变。
<div>
<div style="position:relative; background:green; ">
<div style="position:absolute; top:30px; left:50px; margin:auto; width:250px; height:40px; text-align:center; padding-top:10px; background:black; color:#fff;">Menu goes here</div>
<div><img src="http://america.aljazeera.com/content/ajam/watch/shows/the-stream/the-stream-officialblog/2013/9/16/indiana-ag-callsfordrugtestingofpregnantwomen/jcr:content/blog/mainpar/adaptiveimage/src.adapt.960.high.1379636395676.jpg" height="400" /></div></div>
<div style="background:#fff; padding:30px;">Footer</div>
</div>见Feddle：http://jsfiddle.net/HZbAt/
希望它能帮上忙
Stack Overflow用户
发布于 2016-02-24 19:31:58
在我的页面上，我有页边距最高的80 my，它将内容向下推，这是他们可以添加到代码中的任何东西，这样就不会发生类似-80 my的情况了？这是用于jquery脚本的
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19498316
复制相关文章
相似问题
腾讯云开发者
