如何用CSS或jquery让图片在高度上适应屏幕高度（下面还有要求）

首先我想知道你这个的大小是固定的还是不固定的，我的意思是：是不是一直都是100100或者200200的，还是说有时候是100100有时候是200200的？如果是确定大小的情况下那就简单了，就是用浮动定位（fixed）然后left/top的值为50%； margin的上和左的值设置为-(宽高的一半),如果是大小不固定的话那就只能用js了

这个使用css是达不到具体效果的，这个只能使用js，具体流程就是先获取屏幕的高度，然后获取上面的div高度，经过计算得出下面div的高度，并使用js进行设置。当然了，获取上面div高度要在页面加载完毕之后进行获取，而不是dom元素加载完毕获取。希望帮助到你

一般来说在移动浏览器上是拿不到屏幕真实分辨率的，因为页面渲染是在一个叫viewport的页面绘制区域内（说的通俗点就是手机浏览器是用一个虚拟的屏幕来显示网页的）。viewport和屏幕的真实尺寸并不是对应的，如在Safari Mobile中viewport默认宽度（320px）是屏幕真实尺寸（640px）的一半，这里不管是用windowinnerHeight还是windowscreenwidth拿到的都是320px。当然我们可以通过meta设置改变viewport的比例，如initial-scale=5就可以让viewport和屏幕一致的尺寸，但这个比例在不同的手机上并不一定是2倍关系，特别是Android手机，在大屏手机（5寸以上）上这个值是3倍甚至4倍。而且改变viewport比例后可能会导致后续制作中出现一系列问题。所以我认为不要纠结一定要拿到屏幕真实尺寸，就把viewport的尺寸当成屏幕的尺寸进行页面设计和制作肯定是没有问题的。

有一个非常曲线的解决办法，就是：css的媒体查询（@media）是能够检测屏幕尺寸（其实是浏览器窗体的真实尺寸，并不是屏幕的真实物理尺寸，介意的朋友就不要看了）的，通过它来给网页内的某个元素设置一个特殊的属性，然后再用JavaScript来获取这个属性值。当然这样只能获得一个阶梯值（比如480px到540px之间、540px到600px之间等等），不是精确值，所以可能得不偿失，因此我是不推荐的。

$(window)是jquery 对象， 加height()  也是就是获取窗口高度

同理，如果你想获取某个div的高度可以使用

var divHeight = $("div")height();

/或者/

var divHeight = $("div")[0]offsetHeight;

$("div")是jquery对象，$("div")[0] 或者 $("div")get(0)是dom对象

但是在开发中会有很多坑  这点你得注意

如果 当前的 元素是 隐藏状态 display ： none

那你是无法通过上述方法和获取宽高的  ，所以在开发中如果没有获取到宽高，就要留意上面的代码在执行的时候 该元素是不是在隐藏状态

如果你想把 屏幕的高度 赋值给div

$("div")height(winHeight)

// 或者

$("div")[0]offsetHeight = winHeight

项目中，移动端要自适应，由于有时候数据不够，所以导致了有的区域空白

要求：没有数据的时候能够充满屏幕，数据超出屏幕就出现滚动条

做法

1-让容器高度充满这个屏幕

在容器内容很少的情况下，要想让这个容器充满整个屏幕：

`container{

}`

2-让容器高度充满剩余屏幕高度

要让容器充满屏幕的剩余高度，用 vh 结合 flex 布局就可以实现。

`content{

}

header{

}

content{

}

footer{

}`

网页视口尺寸

windowscreenheight //屏幕高度，667

windowinnerHeight //网页视口高度，553

documentbodyclientHeight //body高度，网页内容的高度根据网页内容决定

vh网页视口高度的1/100

vw网页视口宽度1/100

vmax取两者（vh/vw）最大值

vmin取两者（vh/vw）最小值

以上就是关于如何用CSS或jquery让图片在高度上适应屏幕高度（下面还有要求）全部的内容，包括:如何用CSS或jquery让图片在高度上适应屏幕高度（下面还有要求）、DIV+CSS效果求助，上下两个DIV，要求布满整个浏览器，且整个浏览器不能出现滚动条、用javascript 怎样才能很好的获取手机的屏幕宽度和高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！