我有一个使用背景封面图像的简单 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;
}
但是，当我使用 Bootstrap 创建一个简单的 Angular 应用程序并使用相同的代码时，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 文件中工作。而且我已经调试了 Angular 应用程序以查看是否为 body 和 mainBody 添加了任何额外的 css，但没有找到。非常感谢您的帮助!
最佳答案
您没有提到在 html 中添加您自己的样式表的顺序。如果你在自定义的css文件下面添加了bootstrap文件，那么问题可能是由于css的过右问题导致的。 所以首先添加你的 Bootstrap 文件，然后添加你的自定义 css。 如果您已经完成此操作，请提供您的 html div。
关于html - Div 在 Angular 应用程序中失去高度 - 背景覆盖停止工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31234065/