css - css 中的 100% 宽度在较低的屏幕分辨率下不起作用

Question

我在做一个元素http://damiracle.com/clientdemos/site_ibfa/我在这里使用标题面板宽度 100%。

    #header
{

    width:100%;
    height:829px;
    /*background:url(../images/head2.png) repeat-x;*/
    background:#000;
    /*overflow:hidden;*/
    margin-bottom:10px; 



    }

在大屏幕分辨率下一切正常，但在较小的屏幕分辨率下它会在右侧显示一个空白区域。我已经尽了一切努力。我写了一个全局的css

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {margin:0;padding:0; border:0;font-size:100%; font:inherit; vertical-align:baseline;}

但它也不起作用。如果有人帮助我解决这个问题，我将不胜感激。在此先感谢大家

Answer 1

将 min-width:1200px; 添加到您的 #header

#header {
    width:100%;
    height:829px;
    background:#000;
    margin-bottom:10px; 
    min-width: 1200px;
}

P.S:您可以为所有 block 使用一个背景图像!优化你的网站。对于 block 中的标题，请使用 img 和 alt(这对于 SEO 和禁用图像的用户来说是很好的途径)，如下所示:

<img src="/images/destination-egypt.png" alt="Destination Egypt"/>

或更多优化使用CSS-sprites .