Question

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

我已经使用了所有块/内联块，因为它只是一个基本的组合类型的网站。这是一个显示问题的JSFiddle，如果删除名为picture的div，页脚仍然存在。

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。我已经寻找了一些建议，但大多数事情谈论粘性页脚或使用浮动，什么不是。我已经尝试了所有可以想到的东西，我只是不能让它与内容一起移动....

或者，如果你知道一个已经为此回答过的问题，那就太棒了！我有很多不同的@媒体，但是我把它缩小了，以减轻你们的痛苦。

Answer 1

所以事实证明我已经看了太多而错过了一个基本的东西......

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

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

如何使页脚移动内容CSS - 没有浮动，所有块/内联块

1 个答案: