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

Question

我在这段代码中使用媒体查询来创建一个在不同分辨率下看起来相似的网页。当我尝试更改分辨率时，页脚大小和页眉大小减小（实际上页眉和页脚中的一半内容被裁剪）当窗口高度调整大小时，页脚高于 56 像素（即）它不会保留在网页下方但它在内容部分上升了 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%;
       }
}

Answer 1

先看看这个，

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

还有一个<。