bootstrap框架下为div标签设置动态高度

  bootstrap框架下是可以动态设置div的高度的,解决方案就是通过jQuery进行动态操作,设置div的高度即可解决。我遇到的问题是报告内容超过了我之前设置的div高度,这个div是有背景色的,所以没有办法自适应整个文档对象的高度。一开始我设置了该div的height属性为100%,但是不生效。后来通过dom操作的方法实现了。

问题溯源:

最开始在属性设置为:height: 1200px

bootstrap框架下为div标签设置动态高度

报告页面效果:

发现了问题请看下图

bootstrap框架下为div标签设置动态高度

第一次修改是将height: 1200px改成height: 100%

bootstrap框架下为div标签设置动态高度

修改后的效果:

修改后好像更严重了,emmm

bootstrap框架下为div标签设置动态高度

正确的解决方案:

 通过获取整个doc文档的高度设定div高度,完美解决!实现代码如下!

html示例:

 

<div id="pages" class="row" style="height:1200px;background-color: #f8fdfb;">
   这是我的div
<div>

js代码实现:

<script>

//获取当前文档的高度,为报告准备动态高度,减去1000是为了减去封面的高度,
// 剩余高度即是我们想要的报告页
var height= $(document).height()-1000;
 $("#pages").css('height',height+"px");

</script>

实现效果:

bootstrap框架下为div标签设置动态高度