如何使网站主页在屏幕上显示所有内容（无滚动条）？

【问题标题】：How can I make a website homepage showing everything on screen (no scrollbars)?如何使网站主页在屏幕上显示所有内容（无滚动条）？
【发布时间】：2016-02-09 15:07:42
【问题描述】：

我正在尝试制作一个简单的（响应式）网站，其主页包含：

标题
背景图片
页脚

但我找不到在“第一个屏幕”中同时查看页眉、背景图像和页脚的方法，而无需向下滚动页面。我在整个互联网和这个论坛上进行了搜索，但找不到适合我需要的解决方案。

为了使网站具有响应性，我正在使用 w3.css --> http://www.w3schools.com/w3css/default.asp

这些是我正在使用的文件http://www65.zippyshare.com/v/Hhb6FmUY/file.html

我希望我的问题很清楚，并且有人可以帮助我！

【问题讨论】：

标签： html css header footer

【解决方案1】：

我不从 SO 下载文件。

但我为您制作了一个非常基本的模板，其中包含单个页面上的页眉、背景和页脚，NO 滚动。

HTML：

<head>
    <title></title>
</head>
<body>
<nav></nav>
    <footer></footer>
</body>
</html>

CSS：

html {
    position: relative;
    min-height: 100%;
}
nav{
  width: 100%;
  height: 50px;
  background: green;
}
body {
    margin: 0 0 100px;
  background: blue;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: red;
}

CODEPEN DEMO

【讨论】：