Question

我有一个使用背景封面图片的简单html应用程序。以下代码工作正常。

body{
    width: 100%;
    height: 100%;
    margin: 0 0;
    padding: 0 0;
}

.mainBody{
    width:100%;
    height: 100%;
    background: url("/images/background.jpg") no-repeat fixed center;
    background-size: cover;
    margin: 0 0;
    padding: 0 0;
}

然而，当我创建一个简单的角度应用程序w / bootstrap并使用相同的代码时，mainBody div丢失了它的高度组件，图像无法显示。

html简单明了：

的index.html

<body ng-app="testApp">
<div ui-view=""></div>

root.html

<div class="mainBody">

  <div class="navTitle">
    <span class="title">Recordings</span>
  </div>

  <div class="navMenu">
    <!-- <span class="fa fa-twitter menu twitter"></span> -->
    <span class="menu">About</span>
    <span class="menu">Podcasts</span>
    <span class="menu">Support</span>
  </div>  

</div>

同一个root.html在一个简单的html文件中工作。我已经调试了角应用程序，看看是否有任何额外的css被添加到body和mainBody并且没有找到任何。非常感谢您的帮助！

Answer 1

您还没有提到在html中添加自己的样式表的顺序。如果您在自定义css文件下添加了引导程序文件，则可能由于css的过度问题而发生问题。首先添加您的bootstrap文件，然后添加您的自定义CSS。如果你已经完成了这个，那么请提供你的html div。

Answer 2

尝试使用此代码

html{
    height: 100%;
}
body {
    min-height: 100%;
}

body发现它的父div是html。所以html需要适当的高度。

Div在角度app中失去高度 - 背景盖停止工作

2 个答案: