Question

更新：这是一支笔： http://codepen.io/isiahmeadows/pen/RrjOEZ?editors=110

我的目标是传统的粘性页脚，响应，就像这样：

* *  | header  |  * *
* *  | ------- |  * *
* *  | content |  * *
* *  |         |  * *
* *  |         |  * *
* *  |         |  * *
* *  | ------- |  * *
* *  | footer  |  * *

侧面是彩色的，并且有传统的页眉和页脚，但是我无法将粘性页脚实际包含在包装内。这是我的相关Jade和Stylus（使用那些而不是HTML / CSS，但我对HTML / CSS答案没问题。）

//- Jade
#content
    #header //- header stuff
    #body //- body block
    #license: div
        footer
            small
                //- license stuff

// Stylus
body
    font-family "Arial", sans-serif
    background-color page-border-color
    color black

#content
    background-color white
    max-width 1200px
    width 90%
    height 100%
    margin 0 auto
    padding 1em 1.5em 0 1.5em
    side border 1px solid #888

#header
    .separator
        margin-top -0.25em

        &::after
            content "|"
            font-size 1.25em
            color border-color

#license
    position absolute
    right 0
    bottom 0
    left 0

    div
        rule top 0.5em

    footer
        margin 1em auto
        text-align center
        width-scale 50% 200px 600px

谷歌似乎并不是我的朋友，因为我尝试过的每一种可能的解决方案（共计大约六种不同的方法）并没有将主包装延伸到#license div后面的底部。大多数其他人使用绝对定位，如果我想保持我的网站响应，这将无法正常工作。这些解决方案中的每一个，包括我上面尝试过的解决方案，都会拉伸底部以填充视点宽度和/或产生如下结果：

* *  | header  |  * *
* *  | ------- |  * *
* *  | content |  * *
* *  |         |  * *
* * * * * * * * * * *
* * * * * * * * * * *
* * *  -------  * * *  <-- Background color behind footer
* * *  footer   * * *

不是我想要的东西。任何想法如何解决这个没有绝对定位，最好没有JavaScript？

在页面边框包装内的粘性页脚

0 个答案: