Question

bootstrap网页自适应问题

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

Answer 1

<div id="content" class="wrapperXXX">

    <div class="container-fluid mainXXX">
        ...
    </div>

    <div class="navbar navbar-default navbar-fixed-bottom bottomXXX">
        <div class="container-fluid">
            <h2>bottom div</h2>
        </div>
    </div>
    
</div>

<style type="text/css">
    .wrapperXXX {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .mainXXX {
        background-color: pink;
        height: 100%;
    }

    .bottomXXX {
        background-color: lime;
    }
</style>

效果：

窗口缩小时：

拉大时：

Answer 2

<div id="content" class="wrapperXXX">
 
    <div class="container-fluid mainXXX">
        ...
    </div>
 
    <div class="navbar navbar-default navbar-fixed-bottom bottomXXX">
        <div class="container-fluid">
            <h2>bottom div</h2>
        </div>
    </div>
     
</div>
 
<style type="text/css">
    .wrapperXXX {
        position: fixed;
        width: 100%;
        height: 100%;
    }
 
    .mainXXX {
        background-color: pink;
        height: 100%;
    }
 
    .bottomXXX {
        background-color: lime;
    }
</style>

效果：

窗口缩小时：

拉大时：

Answer 3

<div class="container-fluid"></div>:占100%的视口宽度

追问

那1的高度怎么设置呢？是设置成百分比吗？

Answer 4

1不用设定高度，或设定为style="height: auto;"

追问

3 要求居于底部，我是用绝对定位加bottom：0px做的，如果高度就撑不起来了，如果要保持3居于底部的话要怎么写定位？