html/css 页眉和页脚没有填满整个空间

Question

您好，我的布局有问题，当我调整它的大小时，它没有填满整个空间。请查看here

我的示例代码:

        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        p, a, h1 {
            font-family: "Trebuchet MS", Helvetica, sans-serif;
        }

        .container {
            width: 100%;
            min-height: 100%;
            position: relative;
        }

        .content {
            width: 96%;
            max-width: 720px;
            min-width: 600px;
            margin: 0 auto;
            padding: 10px;
            padding-bottom: 245px; /* Height of the footer element */
        }

        .headerWrapper {
            position: absolute;
            height: 85px;
            background: #19A347;
            z-index: 9000;
            width: 100%;
        }

        #header {
            width: 960px;
            margin: 0 auto;
            position: relative;
        }

        .logo {
            position: absolute;
        }

        .logoimg {
            display: block;
            width: 155px;
            height: 85px;
            text-indent: -9999px;   
        }

        .globalnav {
            float: right;
            clear: right;
            padding: 8px 8px 0 0;
            display: block;
        }
        .nav-menu {
            list-style: none;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        .nav-menu li {
            display: inline;
        }
        .nav-menu a {
            display: inline-block;
            padding: 15px;
            margin: 5px;
            color: #fff;
            font-size: 20px;
            text-decoration: none;
        }

        .nav-menu a:hover {
            color: #66C285; 
        }


        #footer {
            height: 245px;
            background: #1c1c1c;
            position: absolute;
            bottom:0;
            left:0;
            width: 100%;
        } 

        .cols-container {
            margin: 0 auto;
            max-width: 960px;
            min-width: 900px;
            overflow: hidden;
        } 

        .cols-container div {
            width: 20%;
            float: left;
            padding: 5px;
            margin: 15px;
        }

        .heading {
            font-size: 20px;
            color: #fff;
            background: #009933;
            padding: 5px 0 5px 10px;
        }

        #footer li, a {
            color: #fff;
            text-decoration: none;
        }

        #footer a:hover {
            color: #999;
        };

我不知道是什么让它以这种方式运行。非常感谢您的帮助。

Answer 1

您应该更改 header 和 headerWrapper 之间的 width:

.headerWrapper {
position: absolute;
height: 85px;
background: #19A347;
z-index: 9000;
width: 960px;

}

#header {
width: 100%;
margin: 0 auto;
position: relative;
}

您还应该更改这些规则:

.cols-container {
    margin: 0 auto;
    max-width: 960px;
    min-width: 900px;
    overflow: hidden;
} 

.content {
width: 96%;
max-width: 720px;
min-width: 600px;
margin: 0 auto;
padding: 10px;
padding-bottom: 245px; /* Height of the footer element */
} 

到你想要的最小宽度:

 .cols-container {
    margin: 0 auto;
    max-width: 960px;
    min-width: 400px;
    overflow: hidden;
 } 

.content {
width: 96%;
max-width: 720px;
min-width: 400px;
margin: 0 auto;
padding: 10px;
padding-bottom: 245px; /* Height of the footer element */
}

JSFIDDLE