页脚高度不填满屏幕？

-2

我一直在多个设备上测试我的网站，并且在高分辨率的屏幕上测试时，页脚下方有所有额外的空白区域。页脚高度不填满屏幕？

如何让我的高度动态的，解决这个问题？

我的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>

来源

2017-02-10 Dileet

我相信有几十个答案对SO这个问题 – Armin

你是否希望它始终固定在底部？ – scoopzilla

尝试添加这些对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

来源

2017-02-10 17:23:24 Arlid

这是一个怎样的答案？在这些链接可能被破坏之后，未来的访问者呢？ – Armin

是的，你是对的。我从该链接添加一些示例。我认为它现在更具可读性。 – Arlid

看起来更好。请避免在答案中使用外部链接，因为它们可能会随着时间的推移轻松删除，这将使您的答案在将来无法使用。 – Armin

一个快速和简单的解决方法是将最小高度添加到.contact元素。

假设它直接坐在内幕你的身体元素，如果你的页脚高度为200像素，你可以这样做：

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

这确实需要你的身体任一位置：静态的; （默认值）或最小高度为100％。

来源

2017-02-10 17:23:34

一个最小高度添加到您的身体像这样：
```
body { 
    min-height: 100%; 
} 
```
更改您的页脚position到absolute这样的：
```
.footer { 
    position: absolute; 
} 
```

位置，并添加宽度页脚像这样：

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

来源

2017-02-10 17:39:23

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

这给你的内容和页脚的视觉分离，而无需定位或调整页脚的大小。

继承人是的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

来源

2017-02-10 19:26:36

页脚高度不填满屏幕？

回答

相关问题