Question

我希望我的页脚调整移动设备上的页面大小或屏幕大小，使其看起来不像一个非常大的空页脚。

HTML：

<footer>
    <div class="footerwrapper">
    </div>
</footer>

CSS：

footer {
    height:100%;
    border-top: 1px dashed #FDF3E7;
    background-color:#250800;
    text-align:left;
}

.footerwrapper { border-bottom: 1px dotted #3B3738;padding:50px;min-height:200px; background-color:#220a03; margin: 0 auto; }

如上所示，我尝试将包装器与我的父页脚重叠，但它并没有真正按照我想要的方式工作。我实际上只希望页脚填充页面的其余部分（也在移动设备上），而不会充斥页脚。任何人吗？

Answer 1

css文件：

footer{
    min-height:200px; //you can define any height you like!
}
footer .footerwrapper {
    border-bottom: 1px dotted #3B3738;
    background-color:#220a03; 
    margin: 0 auto;
    width: 500px;// this width you can define your self
    position: fixed;
    bottom: 0;
}

Answer 2

更改footer的css，如下所述。

footer {
    border-top: 1px dashed #FDF3E7;
    background-color: #250800;
    text-align: left;
    position: fixed;
    left: 0px;
    right: 0px;
}

请参阅http://jsfiddle.net/7Ybrn/

Answer 3

如果你使用的是jQuery，你可以这样做来调整你的身高

$windowHeight = $('window').height()
$mainDivHeight = $('.yourMainDiv').height()
$footerHeight = $('footer').height()

// check if the space is larger your footer height then adjust to that height for footer
if(($windowHeight - $mainDivHeight) > $footerHeight ) {
    $('footer').height($windowHeight - $mainDivHeight)
}

页脚不会调整为页面大小

3 个答案: