背景色未完全填充div

Question

Background-color is not fully filling the div ( I want to color the div between the navbar and the footer ), the background color is only reaching maybe half of the page, is not filling all the way down till the end of the container. Background-color不能完全填充div （我想为navbar和footer之间的div着色），背景色仅到达页面的一半，直到容器末端都没有完全填充。

So I hope you guys can help out on getting to the source of the issue, cause I have no idea what could be causing the problem :/ 因此，我希望你们能帮助您找到问题的根源，因为我不知道是什么引起了问题：/

<!DOCTYPE html>
<html>

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <title>FunPic - Share your pictures</title>
    </head>

    <body>
        <div class="container">

            <div id="header">
                <div id="navtext">
                    <p>FunPic - Share your pictures</p>
                </div>
                <div id="menu">
                    <ul id="navbar">
                        <li>Inicio</li>
                        <li>Subir Foto</li>
                        <li>Contacto</li>
                    </ul>
                </div>
            </div>

            <div id="wrapper">
                <div id="content">
                    <div id="image"><img src="images/pic.jpg"></div>
                </div>
                <div id="content">
                    <div id="image"><img src="images/pic.jpg"></div>
                </div>
                <div id="content">
                    <div id="image"><img src="images/pic.jpg"></div>
                </div>
                <div id="content">
                    <div id="image"><img src="images/pic.jpg"></div>
                </div>
            </div>

        </div>
        <div id="footer">&copyFun Pic 2015 - Costa Rica</div>
    </body>

</html>

Here's the CSS: 这是CSS：

{
    max-width: 1024px;
    color: red;
    margin: auto;
}
html, body {
    width: 100%;
    margin: 0 auto;
    height: 100%;
}
.container {
    margin: 0 auto;
    width: 100%;
    background-color: #E8E8E8;
    height: 100%;
}
#header {
    margin-bottom: 30;
    width: 100%;
    height: 50px;
    float: left;
    background: #8AE6B8;
}
#navtext {
    padding: 14;
    width: 40%;
    float: left;
}
#navtext p {
    margin-left: 40%;
}
#menu {
    padding: 14;
    width: 40%;
    float: left;
}
#navbar {
    margin-left: 65px;
    width: 100%;
    float: left;
}
#navbar li {
    list-style: none;
    margin-right: 10;
    display: inline-block;
}
#wrapper {
    margin: 30;
    width: 100%;
    float: left;
}
#content {
    margin: 0 auto;
    width: 40%;
    height: 600px;
    display: block;
}
#image {
    width: 100%;
    margin: 0 auto;
}
#image img {
    width: 100%;
}
#footer {
    margin: auto;
    width: 100%;
    height: 50px;
    text-align: center;
    background-color: #202020;
    clear: both;
}

Answer 1

Do it like this 像这样做

#wrapper {
    background-color: #E8E8E8;
}

change #E8E8E8 to any color you want. 将#E8E8E8更改为所需的任何颜色。 This will only set the background-color property of your div between navbar and footer divs. 这只会在navbar和footer div之间设置div的background-color属性。

Answer 2

I got it, i noticed i was coloring the CONTAINER instead of the WRAPPER..! 我知道了，我注意到我正在给容器而不是包装纸上色。 ugh... i feel so dumb... 嗯...我觉得很蠢...

背景色未完全填充div

问题描述

2 个解决方案

解决方案1
2 2015-08-20 13:10:03

解决方案2
0 2015-08-20 13:22:49

背景色未完全填充div

问题描述

2 个解决方案

解决方案1 2 2015-08-20 13:10:03

解决方案2 0 2015-08-20 13:22:49

解决方案1
2 2015-08-20 13:10:03

解决方案2
0 2015-08-20 13:22:49