无js实现div,随窗口浮动

div+css实现div 随窗口浮动

<html>
<head>
    <style type="text/css">
        html, body, #wrap{ height: 100%; width: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 class="footer">
        fff
    </div>

    asdfasdfasdf
    <div style="position:fixed;bottom:50%;width:300px; height:150px;float:left; background-color:Red;">
    HHHHHHHHHHHHHH
    </div>
    asdfasdfasd
</body>
</html>