Css：设置身体高度= 100％的页脚答案

【问题标题】：Css: Styling footer with a body height=100%Css：设置身体高度= 100％的页脚
【发布时间】：2019-04-05 07:25:03
【问题描述】：

我有一个带有简单模板的 angularJS web 应用程序：

<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;
}

如您所见，我在某些组件中有一个 height:100% ，因为我希望主页打开一个具有 100% 高度的背景图像。在这张图片下面有一些主要内容。关键是，在这种结构下，页脚显示在背景图像的正下方，在主要内容之上。

请看这个plunker更清楚地看到问题：https://plnkr.co/edit/gyNOJmc5uzHAEhXwzRuq?p=preview

我希望将页脚放在页面末尾，正如预期的那样，位于整个主要内容的下方。

【问题讨论】：

好吧，如果 .wrapper 的高度为：100%，那么 #footer 就没有空间了，除非你想将两者重叠
好的。但是我应该怎么做才能让一切正常工作呢？
<footer> 周围的<div> 的用途是什么？
请注意，它是一个 AngularJS 模板：因此 div 来自：
里面是页脚。但是，我认为这并没有解决问题。

标签： html css angularjs

【解决方案1】：

<div><p>content</p>...</div> 在.home-top 之外，height: 100% 在.language-loaded 之内，也有 100%。所以基本上你有内容溢出 .language-loaded。

如果您无法更改 HTML 结构，则删除所有 height: 100% 并在 .home-top 上使用 height: 100vh (viewport units)。

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>

【讨论】：

恐怕这行不通。正如您可以在标题上方看到的内容，也在背景图像上方（以简化背景颜色）。 home-top 应该有一个背景图片，在这种情况下，背景颜色占 100%，但内容不应该在里面，而是在下面。以及底部的页脚。
@Rober 抱歉，我没有正确理解这个问题。检查更新的答案。
我明白你的意思，那太好了。但恐怕没那么容易。对不起，如果我没有解释自己。我已经更新了问题。我不知道你是否知道 AngularJS，只要视图发生变化，内容就会动态地加载到 ng-view 中。因此，在这种情况下，带有内容的
进入包装器。
该方法应该类似于能够将 home-top 设置为 height=100% 而无需将其扩展到所有父元素。这可能吗？
@Rober 查看我的新编辑。我没有更改 HTML，只是更改了 CSS。