div显示在底部(一种固定不变,另一种随页面上下翻动而动) 枫

<html>
<head>
    <style type="text/css">
        html, body, #wrap{ height: 100%; 100%;padding:0px; margin:0px;}
        #main{padding-bottom: 0px;}
        /* 必须使用和footer相同的高度 */
        #footer
        {
            left:0px;
            right:0px;
            position: relative;
            margin-top: -0px; /* footer高度的负值 */
            height: 150px;
            background: #ddd;
            clear: both;
            padding:0px;
        }
        .clearfix:after
        {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix
        {
            display: inline-block;
        }
        /* Hides from IE-mac \*/
        * html .clearfix
        {
            height: 1%;
        }
        .clearfix
        {
            display: block;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="main" class="clearfix">
            <div id="content">
                ccc
            </div>
            <div id="side">
                sss
            </div>
        </div>
    </div>
    <div id="footer">
        fff
    </div>
    asdfasdfasdf
    <div style="position:fixed;bottom:0px;right:0px; background-color:Red; 100%;">
    HHHHHHHHHHHHHH
    </div>
    asdfasdfasd
</body>
</html>

原文地址:https://www.cnblogs.com/mrray/p/2241563.html