Html 角度内容赢得';不允许背景扩展
我在这个网站上使用了一些Html 角度内容赢得';不允许背景扩展,html,css,angularjs,Html,Css,Angularjs,我在这个网站上使用了一些angularng标签,但我的背景有问题,无法随标签一起扩展 我举了两个例子: 第一种情况是,使用ng hide 第二种情况是ngbindhtml中的文本太长 两个示例都来自相同的页面代码 index.html <body ng-app="unityAcademyApp"> <div id="gradient"> <div id="background"> ...
angular
ng标签
,但我的背景有问题,无法随标签一起扩展
我举了两个例子:
- 第一种情况是,使用
ng hide
- 第二种情况是
中的文本太长ngbindhtml
两个示例都来自相同的页面代码 index.html
<body ng-app="unityAcademyApp">
<div id="gradient">
<div id="background">
...
<div id="container">
<div ui-view=""></div> <!-- Calling main.html -->
</div>
...
</div>
</div>
</body>
<section>
<article>
...
<div id="article-content" ng-bind-html="article.translation.content"></div>
<div id="article-comments">
...
<nav class="button-menu-center">
<a href class="btn btn-default" ng-click="showComment()"><label class="fa fa-comment"> Comment</label></a>
</nav>
<div class="article-comment" ng-show="comment.show">
<text-angular ng-model="comment.content"
ta-toolbar="[['h1','h2','h3','h4','h5','h6','quote'],
['bold','italics','underline','strikeThrough','ul','ol'],
['insertLink','wordcount','charcount']]">
</text-angular>
<nav class="button-menu-right">
<a href class="btn btn-success" ng-click="save()"><label class="fa fa-check"> Save</label></a>
</nav>
</div>
</div>
</article>
</section>
正如你所看到的,我尝试了height:100vmax
,因为我知道这会得到整页的高度,其中height:100%
可能并不总是这样。然而,我怀疑我在什么地方误解了它
另外,正如您所看到的,正文可以很好地看到页面的高度,只有
#背景和#渐变没有。是否可以尝试使用溢出css属性?类似于溢出:自动代码>mmm是否可以尝试使用“溢出”css属性?类似溢出的东西:自动<代码>溢出:隐藏
成功了,谢谢。如果你更新答案,我会标记它^^
body{
width: 100%;
background-color: black;
background-image: url(../assets/images/woodBackgroundTilable.jpg);
}
body,
#gradient,
#background,
#sidebar{
height: 100vmax;
}
#gradient{
position: absolute;
top:0px;
width: 100%;
min-width: 960px;
background: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
}
#background{
position: relative;
top:0px;
width: 80%;
max-width: 1362px;
margin: 0 auto;
background: url(../assets/images/pergament.png) repeat-y;
background-size: contain;
}
#container{
position: relative;
top:100px;
width: 90%;
margin: auto;
margin-bottom: 100px;
}
#article-content{
color:rgb(0,0,0);
}
.article-comment{
width: 60%;
margin: 10px auto;
border: 1px solid #999;
border-radius: 10px;
padding: 8px;
background: rgba(255,255,255,0.5);
}
.article-comment.ng-hide-add {
animation: 0.5s fadeOut ease;
}
.article-comment.ng-hide-remove {
animation: 0.5s fadeIn ease;
}
/* fade out */
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* fade in */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}