Question

经过两天的研究，我仍然无法找到解决方案。我正在使用图像作为我的bootstrap 2.3.2站点的背景。我试图弄清楚如何让浏览器窗口调整到每个页面的高度。起初，在页脚下方可以看到背景图像，看起来非常愚蠢。所有尝试在后台溢出：隐藏;应用于正文或图像的样式表时不起作用。这是sorta工作的脚本的代码：

`    <script type="text/javascript">
 var viewport = $(window).height();
 $('.container-fluid').height(viewport);
 </script>

` 这使得图像在身体的范围内，但无论浏览器窗口有多高，都会产生滚动。这是用于图像的代码：

body {
margin-top: 0px;
margin-bottom: 0px;
background: none;
background-overflow: hidden;
}

.full {
 background: url(http://test2.gandlconsultants.com/assets/img/big-pic-01.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 background-overflow: hidden;
 z-index: 999;
 }

有人可以告诉我如何让浏览器窗口将自己限制在页面的实际高度，即如果页面只有x个像素，则浏览器窗口会调整到页面的x高度。我写这篇文章就是这样做的。谢谢。

Answer 1

更改

body {
margin-top: 0px;
margin-bottom: 0px;
background: none;
background-overflow: hidden;
}

到

body {
margin-top: 0px;
margin-bottom: 0px;
background: none;
height: 100vh;
}

和

.full {
 background: url(http://test2.gandlconsultants.com/assets/img/big-pic-01.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 background-overflow: hidden;
 z-index: 999;
 }

到

.full {
 background: url(http://test2.gandlconsultants.com/assets/img/big-pic-01.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 height: 100vh;
 z-index: 999;
 }

注意：background-overlfow: hidden不是有效的CSS，也许您的意思是background-origin: border-box;

Answer 2

您没有指定应用.full类的哪个元素来显示文档中的背景。如果它不在body标签上，我建议你将以下内容添加到CSS类中：

 position: relative;
 height:100%;

页面高度等窗口高度

2 个答案: