页面高度等于窗口高度

Page Height Equal Window Height

本文关键字：高度 窗口 于窗口      更新时间：2023-09-26

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

`    <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 高度。我正在写这篇文章的页面就是这样做的。谢谢。

更改

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;

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

 position: relative;
 height:100%;
相关文章：