Question

我一直在多个设备上测试我的网站，当在高分辨率的屏幕上进行测试时，页脚下方会有额外的空白区域。

如何使高度动态，解决此问题？

我的HTML如下：

    <div class="contact">
        <div class="content--container">
          ........
        </div>
        <div class="container">
            <div class="columns is-multiline">
                <div class="column is-12">
                  .......
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
      ......
    </div>

Answer 1

尝试为CSS添加这些内容（来自http://mystrd.at/modern-clean-css-sticky-footer/）：

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px; 
    width: 100%;
}

HTML模板是：

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

下一个选项是使用flexbox，如下例所示：https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

在这些示例中，正文包含class="Site"，内容也有一个名为class="Site-content"的类，如下所示：

<body class="Site">
  <header>Your header</header>
  <main class="Site-content">
     <div> Text </div>
  </main>
</body>

这些示例的CSS如下所示：

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

此示例中使用的网站组件的完整源代码，您可以在此处找到：https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css

Answer 2

快速简便的解决方法是为.contact元素添加最小高度。

假设它直接位于你的身体元素内部，如果你的页脚高度是200px，你可以这样做：

.contact {
   min-height: calc(100% - 200px);
}

这确实要求你的身体处于以下位置：静态; （默认值）或最小高度为100％。

Answer 3

像这样在身体上添加一个最小高度：
```
body {
    min-height: 100%;
}
```
将您的页脚position更改为absolute，如下所示：
```
.footer {
    position: absolute;
}
```

如下所示：为页脚添加位置并添加宽度：

.footer {
    position: absolute;
    bottom:0;
    left:0;
    width: 100%;
}

Answer 4

让页脚看起来像动态高度的另一种简单方法（如果高的页脚高度对你来说无关紧要）是通过改变主体的背景颜色来匹配页脚。然后，您可以为其中一个容器提供100％宽度并应用不同的背景颜色。

这使您可以直观地分隔内容和页脚，而无需定位页脚或调整页脚大小。

Heres是CSS：

  body {
    background-color: tomato;
    height: 100%;
  }

  header { 
    color: white; 
    padding: 20px;
  }

  .container {
    background-color: white;
    height: 200px;
    padding: 20px;
    width: 100%;
  }

  footer {
    background-color: tomato;
    color: white;
    padding: 20px;
  }

和HTML：

<header>
    <h1>This is my header</h1>
</header>
<div class="container">
    <p>This is my content</p>
</div>
<footer> 
    <p> this is my footer that looks like it has a variable height.</p>
</footer>

链接到一个工作示例： http://codepen.io/Brydave/pen/dNQJMb

页脚高度不填充屏幕？

4 个答案: