在响应式布局中经常碰到这样的情况，如两个并排的div盒子（当然也可是多个并排的div盒子），一个盒子里面放的是图片（在这里我们称为A盒子），一个盒子里面放的是文字描述内容（在这里我们称为B盒子），两个盒子各占整个页面宽度的50%（或者有多个div盒子宽度一样，或者多个div盒子宽度不一样，其中有一个或多个盒子包裹一张图片），然而高度要求一样；这样就造成了在适应不同大小的屏幕时，A盒子高度会随图片的改变而改变，而B盒子高度不会出现变化，影响布局和页面的美观。
下面这张图片能够让大家有清楚的认识，效果如图：

HTML如图:
在响应式网站设计布局中，不能设置固定高度，高度要随浏览器宽度的变化而变化，这里想到了JS来设置高度来解决。因为我在这里用得jquery的版本较低，所以用的是$(window).load(function(){}),高版本请用$(window).on(“load”,function(){})。

JS如图：
效果如图：

A、B两个盒子的高度一致了，不管浏览器的宽度怎么变化，两个盒子的高度始终一致。

响应式网站除了设计要有全局性，考虑不同终端的排版外，前端制作也是非常考验技术。

以上就是关于响应式网站布局div盒子高度问题(css响应式布局)，希望对你有帮助，更多内容关注创新互联。

文章名称：响应式网站布局div盒子高度问题(css响应式布局)
URL标题：http://www.fbiktj.com/view/326714.html