html - 如何使页脚随内容 CSS 移动 - 无 float ，所有 block /内联 block

Question

尝试制作我的第一个正确响应的网站，其页脚在滚动到之前一直保持在屏幕外，然后还会注意到上方的内容并随之移动。我有一个网站做类似的事情，但使用了各种我不想在这个网站上使用的可怕的定位/ float 。

我已经使用了所有 block /内联 block ，因为它只是一个基本的投资组合类型的网站。这是一个显示问题的 JSFiddle，如果您删除名为图片的 div，则页脚会保留在原位。

http://jsfiddle.net/41s5vcu8/3/

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin:0;
    font-family: "Raleway";
}
#head {
    height: 30%;
    display: block;
    background-color: #DBB84D;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
#content {
    height: 70%;
    display: block;
    background-color: #ececec;
}
#gallery_wrap {
     max-width: 1200px;
     height:100%;
     width: 100%;
     margin: auto;
     box-shadow: 0 0 150px rgba(0, 0, 0, 0.1);
    text-align: center;
 }
#picture {
     height:250px;
     width: 250px;
    display: inline-block;
     background-color: #fff;
     margin: auto;
}
#foot {
    height: 300px;
    display: block;
    width: 100%;
    background-color: #676767;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset;
}

有一些 CSS，因为我不能只发布 JSFiddle。我已经寻找了一些建议，但大多数事情都在谈论粘性页脚或使用 float 等等。我已经尝试了所有我能想到的方法，但我就是无法让它随内容一起移动....

或者，如果您知道一个已经回答过的问题，那就太好了!我在其中有很多不同的@media，但我将其精简以减轻你们所有人的痛苦。

Answer 1

原来我看太多了，错过了一个基本的东西......

#content {
    min-height: 70%;
    display: block;
    background-color: #ececec;
}

http://jsfiddle.net/41s5vcu8/5/