我需要布置一个网页,其中包含两个必须伸展的图像,以填充可用的浏览器窗口,但是以页面为中心的文本内容.到目前为止,我似乎能够做到这一点的唯一方法是：a)将两张图像合并成一张,并将其设置为身体的背景图像,然后仔细垂直定位内容的中间区域以适应图像间的差距,或b)将容器(固定)div嵌入到容纳液体的容器中,并且固定保持文本内容.然而,我看到了可怕的警告,并且嘲笑那些主张嵌套自举容器的人.
这张图片可能有助于传达我所需要的：
解决方法
你可以试试看.
请注意,您必须根据设计需要应用一些自定义CSS.根据例子：
.container-fluid {
padding: 0;
}
.container-fluid.wrapper {
padding-top: 100px;
}
.ht33 {
height: 200px;
}
.container.content {
width: 970px;
position: absolute;
height: 800px;
background: gray;
color: #fff;
top: 0;
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
}
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="container-fluid wrapper"> <div class="container content"></div> <div class="container-fluid bg-primary ht33"></div> <div class="container-fluid bg-warning ht33"></div> <div class="container-fluid bg-danger ht33"></div> </div>
