Question

我有一个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％。该图像下方有一些主要内容。关键是，通过这种结构，页脚将显示在背景图像下方，主要内容上方。

请查看此插件，以更清楚地了解问题：https://plnkr.co/edit/gyNOJmc5uzHAEhXwzRuq?p=preview

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

Answer 1

<div><p>content</p>...</div>在.home-top之外，其中height: 100%也在.language-loaded内，后者也具有100％。因此，基本上您的内容溢出 .language-loaded。

如果您无法更改HTML结构，请删除所有height: 100%并仅在height: 100vh上使用.home-top（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>

Css：设定页脚的身高= 100％

1 个答案: