页脚高度没有填满屏幕？

Question

I've been testing my site on multiple devices, and when testing on a screen with high resolution there is all this extra white space underneath the footer.我一直在多个设备上测试我的网站，当在高分辨率屏幕上测试时，页脚下方有所有这些额外的空白。

How do I make the height dynamic, fixing this issue?如何使高度动态化，解决这个问题？

My HTML is as follows:我的 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

Try to add these for CSS (it's from http://mystrd.at/modern-clean-css-sticky-footer/ ):尝试为 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 template for that is: HTML 模板是：

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

Next option is to use flexbox like these example: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/下一个选项是像这些例子一样使用 flexbox： https ://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

In these example body has class="Site" and content also have a class called class="Site-content" and looks like these:在这些示例中，主体具有class="Site"并且内容也具有名为class="Site-content" ，如下所示：

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

CSS for these example looks like:这些示例的 CSS 如下所示：

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

.Site-content {
  flex: 1;
}

Full source for the Site component used in this example you can find here: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css您可以在此处找到此示例中使用的 Site 组件的完整源代码： https : //github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css

Answer 2

A quick and easy fix would be to add a min-height to your .contact element.一个快速而简单的解决方法是为您的 .contact 元素添加一个 min-height 。

Assuming it sits directly insider your body element, and if your footer height is 200px, you could do:假设它直接位于您的 body 元素内部，并且如果您的页脚高度为 200 像素，您可以执行以下操作：

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

This does require that your body is either position:static;这确实要求您的身体处于以下任一位置：静态； (the default) or has a min-height of 100%. （默认）或最小高度为 100%。

Answer 3

Add a min-height to your body like this:像这样为你的身体添加一个最小高度：
```
 body { min-height: 100%; }
```
Change your footer position to absolute like this:像这样将页脚position更改为absolute position ：
```
 .footer { position: absolute; }
```
Position and add width to your footer like this:像这样定位和增加页脚的宽度：
```
 .footer { position: absolute; bottom:0; left:0; width: 100%; }
```

Answer 4

Another easy way to make a footer look like it has a dynamic height (if a tall footer height doesn't matter to you) is by changing the body's background-color to match the footer's.使页脚看起来具有动态高度的另一种简单方法（如果页脚的高度对您来说无关紧要）是更改主体的背景颜色以匹配页脚的背景颜色。 Then you can give one of your containers a 100% width and apply a different background-color.然后你可以给你的一个容器一个 100% 的宽度并应用不同的背景颜色。

That gives you the visual separation of the content and the footer without having to position or resize the footer.这为您提供了内容和页脚的视觉分离，而无需定位或调整页脚的大小。

Heres's the CSS:这是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;
  }

and the HTML:和 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>

Link to a working example: http://codepen.io/Brydave/pen/dNQJMb链接到一个工作示例： http : //codepen.io/Brydave/pen/dNQJMb

页脚高度没有填满屏幕？

问题描述

4 个解决方案

解决方案1
0 2017-02-10 17:23:24

解决方案2
0 2017-02-10 17:23:34

解决方案3
0 2017-02-10 17:39:23

解决方案4
0 2017-02-10 19:26:36

页脚高度没有填满屏幕？

问题描述

4 个解决方案

解决方案1 0 2017-02-10 17:23:24

解决方案2 0 2017-02-10 17:23:34

解决方案3 0 2017-02-10 17:39:23

解决方案4 0 2017-02-10 19:26:36

解决方案1
0 2017-02-10 17:23:24

解决方案2
0 2017-02-10 17:23:34

解决方案3
0 2017-02-10 17:39:23

解决方案4
0 2017-02-10 19:26:36