我有一个angularJS网络应用程序，其中包含一个简单的模板：
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body id="top">
<!-- Templates with views will be inserted here -->
<div class="wrapper" ng-view>
<div class="language-loaded">
<div class="home-top">
<div class="title-wrapper">
<h1 class="home-title">Title</h1>
</div>
</div>
<div>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</div>
</div>
<!-- This is the footer template -->
<div ng-include src="'partials/footer.html'">
<footer id="footer">
This is the footer
</footer>
</div>
生成的网页如下：
HTML：
<body id="top">
<div class="wrapper">
</body>
</html>
CSS：
html, body, .wrapper, .language-loaded, .home-top {height: 100%}
body { background-color: #F5F5F5}
.home-top {background-color: blue;}
.title-wrapper {
position: relative;
top: 39%;
color: #fff;
text-align: center;
}
正如你所看到的，我有一个高度：100％在某些组件中因为我希望主页打开一个占据100％高度的背景图像。在此图像下方有一些主要内容。关键在于，使用此结构，页脚显示在背景图像正下方的主要内容上。
请看这个plunker更清楚地看到问题：https://plnkr.co/edit/gyNOJmc5uzHAEhXwzRuq?p=preview
我想要的是将页脚放在页面的末尾，正如预期的那样，在整个主要内容之下。
<div><p>content</p>...</div>在.home-top之外，有height: 100%，.language-loaded也有100％。所以基本上你有内容溢出.language-loaded。
如果您无法更改HTML结构，则删除所有height: 100%并在height: 100vh上使用viewport units（.home-top）。
body {
background-color: #F5F5F5
}
.home-top {
height: 100vh;
background-color: blue;
}
.title-wrapper {
position: relative;
top: 39%;
color: #fff;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body id="top">
<div class="wrapper">
<div ng-show="languageLoaded" class="language-loaded">
<div class="home-top">
<div class="title-wrapper">
<h1 class="home-title">Title</h1>
</div>
</div>
<div>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</div>
</div>
<div>
<footer id="footer" style="background-color: red">
This is the footer
</footer>
</div>
</body>
</html>