thml粘连布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

        <title></title>
        <style type="text/css">
            *{
                margin: ;
                padding: ;
            }
            #footer{
                height:50px;

                background: darkred;
                text-align: center;
                margin-top:-50px;
            }
        /*    框架撑起来*/
         html,body{
                height: %;
            }
            #wrap{
                 min-height: %;
                background: pink;
            }
            /*重点代码,主元素增高挤压下面元素*/
            #wrap .main{
                padding-bottom: 50px;
            }
        </style>
    </head>
    <body>
          <div id="wrap">
              <div class="main">
                  main增高一定高度后footer也跟着增<br />
                  main增高一定高度后footer也跟着增<br />
                  main增高一定高度后footer也跟着增<br />
                  main增高一定高度后footer也跟着增<br />
                  main增高一定高度后footer也跟着增<br />
                  main增高一定高度后footer也跟着增<br />
                  main增高一定高度后footer也跟着增<br />
                  main增高一定高度后footer也跟着增<br />
              </div>
          </div>
          <div id="footer">
              footer
          </div>
    </body>
</html>