我在加载动态内容时遇到 angular 中的 css 问题。我有一个模板，我在其中放置了页眉、内容和页脚。当我运行应用程序时，页脚位于页眉下方，内容是动态添加到内容部分与页脚重叠并超出页 footer 分。如果我为容器分配高度并将溢出-y自动分配给我的容器部分问题正在解决。但我不希望滚动条到我的内容部分我将在我的内容部分显示图像，这将是冗长的，我希望页脚位于我页面的末尾。我也不希望页脚被固定。我希望它显示在动态下方内容。我也尝试过 flex、calc 选项，但没有成功。我已经给出了下面的代码。请帮助我。
index.html
<!doctype html>
<html>
<head>
<title>MyProj</title>
</head>
<body>
<div class="myContainer">
<div class="myHeader">
//Some Header Code here
</div>
<div ng-view class="myContent">
//Place where the dynamic content loads
</div>
<div class="myFooter">
//footer content here
</div>
</div>
</body>
</html>
CSS
.myContainer {
width: 1024px;
position: relative;
margin: 0 auto;
/* height: 768px; */
height:calc(100vh - 100px);
}
.myContent {
position: relative;
top: 64px;
min-height:calc(100% - 150px);
}
.myFooter {
background: #f4f4f4;
position: relative;
z-index: 1;
height: 80px;
/* position: absolute; */
width: 1024px;
bottom: 0px;
}
请帮助我解决我的问题。在此先感谢您
最佳答案
如果我没理解错的话，您可以简单地使用普通的无样式 div 而不是添加定位。
.myContainer {
width: 1024px;
margin: 0 auto;
}
.myContent {
background: lightgreen;
}
.myFooter {
background: #f4f4f4;
}
关于javascript - 动态 Angular 内容重叠并超出页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57163170/