动态角度内容重叠并超出页脚答案

【问题标题】：Dynamic angular content overlaps and goes beyond footer动态角度内容重叠并超出页脚
【发布时间】：2019-07-23 19:51:33
【问题描述】：

我在加载动态内容时遇到了角度 css 的问题。我有一个模板，我在其中放置了我的页眉、内容和页脚。当我运行应用程序时，页脚位于页眉和内容的正下方动态添加到内容部分与页脚重叠并超出页脚部分。如果我为容器分配高度并将溢出-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;
}

请帮我解决我的问题。提前谢谢你

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

如果我理解正确，您可以简单地使用普通的无样式 div 而不是添加定位。

.myContainer {
    width: 1024px;
    margin: 0 auto;
}

.myContent {
    background: lightgreen;
}

.myFooter {
    background: #f4f4f4;
}

https://codepen.io/anon/pen/NQxYWp

【讨论】：

不，我不能......如果我在里面输入一些静态内容，是的，我将能够实现。由于数据加载是动态的，它与页脚重叠