页脚不会调整页面大小

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

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; }

如上图所示，我试着与我的父母页脚重叠的包装，但它并没有真正的工作就是我想要的。实际上，我只希望脚注填充页面的其余部分（也适用于移动设备），而不会淹没页脚。任何人？

来源

2014-01-09 maikovich

可以创建的jsfiddle？ – Freedom

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; 
}

来源

2014-01-09 02:34:42 jingyinggong

更改CSS的footer像波纹管。

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

看到http://jsfiddle.net/7Ybrn/

来源

2014-01-09 03:08:24 Freedom

如果你正在使用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) 
}

来源

2014-01-09 03:31:23

页脚不会调整页面大小

回答

相关问题