Question

我在此代码中使用媒体查询来创建一个看起来与不同分辨率相似的网页。当我尝试更改分辨率时，页脚大小和页眉大小减小（实际上页眉和页脚中的一半内容被裁剪）当窗口高度调整大小时，页脚高出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%;
       }
}

Answer 1

先检查一下，

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

一个＆lt;在那里。

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

1 个答案: