Я пытаюсь получить изображение посадки, а затем разделы ниже. Чтобы получить полную страницу, независимо от разрешения экрана, мне пришлось сделать положение абсолютным. Относительный не работал, так как это html-документ, который вводится в ng-view.
index.html
<html>
...
<body ng-app="testApp">
<div ng-view></div>
...
</body>
</html>
main.html
<div class="main-header-content">
</div>
<!-- this needs to go below div above but above div is position absolute-->
<div class="main-info">
<h1>heelo</h1>
</div>
main.css
.main-header-content{
position:absolute;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
background-color:#D8C8B8;
}
Это кажется тривиальным, так как многие сайты делают это с помощью обычного IE css:
http://ironsummitmedia.github.io/startbootstrap-creative/ http://ironsummitmedia.github.io/startbootstrap-agency/
Я считаю, что сложная часть этого main.html, где должен быть эффект, - это страница, которая вводится в ng-view.
Оберните содержимое main.html
в div, который absolutely
позиционируется и relatively
позиционирует дочерние элементы. Absolute
позиционирование .main-header-content
потребует от вас установить фиксированный top
для братьев и сестер для правильного выравнивания, что усложнит css.
main.html
<div class="wrapper" >
<div class="main-header-content">
</div>
<!-- this needs to go below div above but above div is position absolute-->
<div class="main-info">
<h1>heelo</h1>
</div>
</div>
main.css
.wrapper{
position:absolute;
height:100%;
width:100%;
top:0px;
left:0px;
}
.main-header-content{
position:relative;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
background-color:#D8C8B8;
}