background-image" cover" Android chrome上的白色空间

时间:2018-05-15 23:00:32

标签: html css angularjs

这个错误让我疯了!

我有一个网站,我在身体元素上放置了一个背景图像,并做了通常的无重复中心固定封面的东西,它看起来很好我试过除了android铬到目前为止,在Android Chrome看来给主页一些滚动,你可以显示几百像素高的白色空间。它适用于chrome桌面,甚至是各种android dev工具模拟器。

以下是我使用的CSS -

body {
  background-color: transparent !important;
  background: url('../../images/pagesbackground.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  overflow: auto;
}

我在HTML元素上尝试了同样的css也无济于事(高度组合:身体和/或html元素都是100vh / 100%)。我还尝试取消后台附件固定,但是在其他页面上它不会向下滚动以扩展内容。我使用bootstrap,Angular将每个页面作为模板提供服务。这是在ng-view中提供模板的index.html。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Goldbee Dev</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="dist/styles/all.min.css">
  <link href='https://fonts.googleapis.com/css?family=Lobster|Roboto|Titillium+Web|Rock+Salt|Condiment|Mate+SC|Pacifico|Luckiest+Guy' rel='stylesheet' type='text/css'>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
</head>
<body ng-app="app">


    <div ng-view></div>








<script src="vendor/angular.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-animate.js"></script>
<script src="dist/scripts/all.min.js"></script>
</body>
</html>

我还试图让背景图片成为包含ng-view的div,并做同样的事情但没有成功。有人有建议吗?

1 个答案:

答案 0 :(得分:0)

我现在使用的一个bandaid(因为该网站是实时的) - 我再次将它作为HTML元素的背景,并使高度达到200%。它会阻止空白,但如果你现在向下滚动,它会向下滚动到很多空白区域。有没有办法防止在没有JS或Jquery的情况下在主页上滚动(我知道如何编写代码,但是寻找最简单的方法)。