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：你可以为所有积木使用一个背景图像！优化您的网站。对于块中的标题，使用img和alt（这是搜索引擎优化的良好路径和禁用图像的用户），如下所示：

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

或更多优化使用CSS-sprites。

Answer 2

这是因为您的#headerTOP有一个width: 1200px。因此，您的#header只能获得屏幕大小的100％大小。但是，如果屏幕宽度低于#headerTOP，则1200px将始终大于{{1}}。

css的100％宽度无法在较低的屏幕分辨率下工作

2 个答案: