html - html/css页眉和页脚未填充整个空间

您好，我的布局存在问题，调整大小时，它并没有填满整个空间。请检查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;
        };

我不知道是什么让它像这样。非常感谢您的帮助。

最佳答案

您应在width和header之间更改headerWrapper：

.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

关于html - html/css页眉和页脚未填充整个空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19876302/