调整浏览器窗口大小时，CSS背景颜色宽度会减小

时间：2013-09-11 02:01:07

标签： html css css3

我有一个页面，但是当我调整浏览器窗口大小时，背景颜色会减少。我希望颜色扩展到完整的浏览器宽度。我的一个div比其他的大。有什么办法解决这个问题？

CSS如下：

@charset "utf-8";

/* ==========================================================================
   RESET STYLES
   ========================================================================== */
* {
    margin: 0; padding: 0;
}

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

img {
    border: 0 none;
}


/* ==========================================================================
   BASE STYLES
   ========================================================================== */

html {
    height: 100%;
}

body {
    font-family: Arial, Helvetica Sans-serif;
    width: 100%; 
    height: 100%;
    color: #595959;
}

.col-full {
    width: 1014px;
    margin: 0 auto;
}   

h1, h2, h3, h4, h5, h6 {
    font-family: Helvetica, Arial, Sans-serif;
}
/* ==========================================================================
   HEADER STYLES
   ========================================================================== */   
#header h1 {
    margin-top: 26px;
    float: left;
}

h1 a span {
    display: none;
}

#login-form {
    float: right;
    margin: 25px 92px 12px 0;
}
    #login-form input {
        width: 150px;
        height: 29px;
        line-height: 29px;
        border: 1px solid #a5a5a5;
        color: #797979;
        font-size: 14px;
        padding-left: 8px;
        margin-left: 3px;
    }
    #login-form #login-button {
        width: 72px;
        height: 30px;
        background: url(../img/login-bg.png) top repeat-x;
        border: 1px solid #494949;
        cursor: pointer;
        margin-left: 0;
        font-weight: bold;
        color: #FFF;
        font-size: 13px;
        padding-left: 0;
        text-shadow: 1px 1px 1px #3f3f3f;
        filter: dropshadow(color=#3f3f3f, offx=1, offy=1);
    }

.form-buttons { 
    margin-left: 3px;
}
    .form-buttons a {
        text-decoration: none;
        font-size: 12px;
        color: #ef4926;
        margin-right: 116px;
    }

.nav {
    clear: both;
    width: 100%;
    height: 47px;
    background: #000;   
}
    .nav ul {
        margin-top: 10px;
        float: left;
    }
    .nav ul li {
        float: left;
        list-style: none;
        margin-right: 53px;
    }
    .nav ul li a {
        text-decoration: none;
        font-family: Helvetica;
        font-weight: bold;
        color: #FFF;
        /*font-size: 16px;*/
        font-size: 15px;
    }

.top-heading {
    background: #363737;
    height: 57px;
    border-top: 1px solid #727272;
    border-bottom: 1px solid #727272;
}
    .top-heading h2 {
        /*font-size: 28px;*/
        font-size: 27px;
        color: #FFF;
        text-shadow: 1px 1px 2px #282929;
        filter: dropshadow(color=#282929, offx=1, offy=1);
        padding-top:8px;
    }

#featured {
    background: url(../img/featured-gd.png) repeat-x;   
}
    #featured .col-full {
        background: url(../img/featured-bg.jpg) no-repeat;
    }
    .featured-content {
        width: 454px;
        float: left;
        margin-right: 40px;
    }
        .featured-content h2 {
            color: #FFF;
            /*font-size: 38px;*/
            font-size: 37px;
            line-height: 1.15;
            margin-top: 45px;
            margin-bottom: 12px;
            text-shadow: 1px 1px 2px #282929;
            filter: dropshadow(color=#282929, offx=1, offy=1);
        }
        .featured-content p {
            font-size: 15px;
            color: #FFF;
            line-height: 1.46;
        }
        .register-btn {
            display: block;
            width: 164px;
            height: 39px;
            text-decoration: none;
            background: url(../img/register-btn.png) repeat-x;
            text-align: center;
            font-family: Helvetica;
            font-weight: bold;
            margin-top: 27px;
            font-size: 22px;
            color: #FFF;
            padding-top: 4px;
            -webkit-box-shadow:  0px 0px 1px 1px #2e2e2e;
            box-shadow:  0px 0px 2px 2px #2e2e2e;
        }
        #featured img {
            margin-top: 6px;
            margin-bottom: 2px;
        }


/* ==========================================================================
   MAIN STYLES
   ========================================================================== */   
#features {
    background: #ff5423;
    overflow: hidden;
}
#features h3 {
    line-height: 1.15;
    color: #FFF;
    font-family: Helvetica;
    padding-top: 24px;
    margin-bottom: 13px;
    /*font-size: 26px;*/
    font-size: 25px;
}

    .features-left {
        width: 447px;
        float: left;
        margin-right: 62px;
    }

    .features-right {
        width: 472px;
        float: left;
    }

        .features-right ul {
            margin-left: 15px;
        }
        .features-right ul li {
            line-height: 1.76;
            color: #ffc3b2;
            font-size: 14px;
            padding-left: 2px;
        }
        .features-right ul li span {
            font-size: 17px;
            color: #fefefe;
            position: relative;
            top: 2px;
        }
        .more-features {
            display: block;
            width: 144px;
            height: 28px;
            color: #fb3800;
            font-family: Helvetica;
            /*font-size: 17px;*/
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            padding-top: 4px;
            text-decoration: none;
            background: url(../img/more-features.png) repeat-x;
            margin-top: 38px;
            margin-bottom: 23px;
        }

#client-list {
    border-top: 4px solid #a6a6a6;
    border-bottom: 4px solid #c6c6c6;
    padding-bottom: 7px;
}   
    #client-list .col-full {
        width: 1080px;
    }   
    #client-list h4 {
        color: #4d4d4d;
        /*font-size: 18px;*/
        font-size: 17px;
        margin-top: 39px;
    }
    #client-list .more-clients {
        float: left;
        text-decoration: none;
        font-size: 15px;
        color: #ff5423;
    }
    #client-list img {
        margin-left: 90px;
        margin-top: -44px;
    }

#main {
    clear: both;
    background: url(../img/main-gd.png) repeat;
}
    .col-446 {
        width: 446px;
        float: left;
        margin-right: 55px;
    }
    .col-476 {
        width: 476px;
        float: left;
    }
    .col-476 p {
        margin-right: 25px;
    }

    #main h3 {
        font-family: Helvetica;
        /*font-size: 28px;*/
        font-size: 27px;
        color: #535353;
        line-height: 1.07;
        margin-top: 30px;
        margin-bottom: 14px;
    }
    #main p {
        font-size: 14px;
        line-height: 1.64;
        margin-bottom: 21px;
    }
    .site-features {
        margin-top: 32px;
        float: left;
    }
    .site-features li {
        list-style: none;
        float: left;
        margin-right: 35px;
    }
        li.sf-last {margin-right: 0;}
    .site-features li a {

    }

    .join-box {

    }
    .join-btn {

    }
    .join-box p {

    }







/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */   
h4 a span {
    display: none;
}

#footer {
    clear: both;
}

1 个答案:

答案 0 :(得分：4)

我认为解决此问题的最佳方法是为您的身体添加最小宽度。这样，当视口太窄而无法显示所有内容时，水平滚动条将允许用户访问整个页面。根据您的内容，min-width: 1100px;将是正确的。

相关问题
最新问题