html底部自适应，内容高度无法做到全屏

2018-03-20 / 4 阅读 / Html

用于底部自适应，保持页脚在内容不够的情况下保持在底部，当内容足够或高于屏幕，会自动将页面撑开，底部依旧保持在底部。


<html>
<head>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    html,body{
        height: 100%;
    }
    .wb-frame{
        position: relative;
        width: 100%;
        height: auto;
        min-height: 100%;
    }
    .wb-main{
        background-color: #333333;
        padding-bottom: 50px;
    }
    .wb-foot{
        position: absolute;
        bottom: 0px;
        left: 0px;
        height: 50px;
        width: 100%;
        background-color: #06865e;
    }
</style>
<!--[if IE 6]->
    <style>
        #wapper{height:100%;} /* IE在高度不够时会自动撑开层*/
    </style>
    <![endif]-->
</head>
<div class="wb-frame">
    <div class="wb-main"></div>
    <div class="wb-foot"></div>
</div>
<body>
</body>
</html>

本文链接： http://blog.wbsite.xyz/blog/227360129568768.htm

尊重作者，转载请注明出处！

版权申明：本文版权归作者所有，未经授权，任何单位或个人不得以任何形式转载、摘编或利用其它方式使用本博客内容。作者保留追究相关法律责任的权利。如需使用博客内容，请与作者联系获得授权。感谢对本文的尊重与支持。

免责声明：本网站所载内容仅供参考，不构成任何专业建议。用户基于本网站内容作出的决策，风险自担。对于因使用本网站内容而产生的任何直接或间接损失，本网站不承担任何责任。请用户审慎判断，理性使用。

html底部自适应，内容高度无法做到全屏

相关推荐