Css 使用不同分辨率的媒体查询的网页

我在这段代码中使用媒体查询来创建一个网页，对于不同的分辨率，它看起来很相似。当我尝试更改分辨率时，页脚大小和页眉大小会减小（实际上页眉和页脚中有一半的内容会被裁剪），当窗口高度调整时，页脚会向上移动56px（即页脚不在网页下方，但在内容部分向上移动56px）。我希望所有分辨率的页眉和页脚看起来都一样。请帮我做这个

<div data-role="page" id="reader-page" class="bg_main">
    <div data-role="header" id="b_header"> ..... </div>
         <div data-role="content" id="content" class="content_bg"> ...... </div>
         <<div  data-role="footer" id="footer_main">......</div>
</div>

@media screen and (max-width:1440px) and (max-height:900px) {
#b_header{
    background-image: url("../images/titlebar.jpg");    
    height:9.2%;
    }

#footer_main{
    background-image: url('../images/image.jpg');
    position:relative;
    width:100%;
    height:9.2%;            
    }

.bg_main {
        position: relative;
        height: 100%; font-family : calibri;
        color: #544E4F;
        font-size: 1em;
        background-image: url('../images/background.jpg');
        font-family: calibri;
    }

.content_bg {
        position: relative;
        background-image: url("../images/bgd_full_screen.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 76.0%;
        width: 100.0%;
       }
}

..... 
...... 
先检查一下这个

<<div  data-role="footer" id="footer_main">......</div>