bootstrap网页自适应问题

Question

布局如图所示，1是一个有背景图片的DIV容器，2是标题文字DIV，3是一张图片，需要做一些动画效果，这里为了标注方便所以画了框，其实是需要撑满整个1容器的，页面需要做到全部自适应，缩放页面不出现滚动条，也就是说1的大小是不一定的，所以问题就是怎么使用bootstrap做到在父元素宽度（横向撑满li浏览器页面）和高度大小未知的情况下子元素撑满整个DIV？

Answer 1

123456789101112131415161718192021222324252627282930<div&nbsp;id="content"&nbsp;class="wrapperXXX">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="container-fluid&nbsp;mainXXX">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="navbar&nbsp;navbar-default&nbsp;navbar-fixed-bottom&nbsp;bottomXXX">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="container-fluid">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h2>bottom&nbsp;div</h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;<style&nbsp;type="text/css">&nbsp;&nbsp;&nbsp;&nbsp;.wrapperXXX&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;fixed;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.mainXXX&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;pink;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.bottomXXX&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;lime;&nbsp;&nbsp;&nbsp;&nbsp;}</style>效果：窗口缩小时：拉大时：