通过浏览器设置元素的高度，而不会中断内容 [英] Set height for element by browser without cutting off the content

问题描述

我可以通过浏览器确定这是伟大的（链接下面），但唯一的问题是，当在较小的屏幕上查看它切断内容，当刷新页面在谷歌Chrome与浏览器代理打开它也关闭了。

I was able to get it determined by the browser which is great (link below) but the only problem now is when viewing it on smaller screens it cuts off the content and when refresh the page in google chrome with the browser agent open it cuts off for that too as well.

如何获得适合浏览器的背景，而不会中断内容。

How can I get the background to fit the browser without cutting off the content.

- link - - > 如何使元素具有相同的高度作为浏览器解析？

--link --> How to get an element the same height as browser resolution?

<script type="text/javascript"> 
$(document).ready(function() { 
var height = window.innerHeight; 
$(".bg").css("height", height); }); 
</script>

推荐答案

您可以计算窗口的高度和宽度，具有以下值：

You can calculate window's height and width than manipulate to element with these values:

这里是工作jsFiddle

var background = $('.wrapper');
function arrange() {
    var windowH = $(window).height();
    var windowW = $(window).width();
    background.css({'height':windowH+'px','width':windowW+'px','background-size':windowW+'px '+windowH+'px'});
}
arrange(); //for setting sizes on load

$(window).resize(function() {arrange();}); //setting size on window resize

这篇关于通过浏览器设置元素的高度，而不会中断内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！