Question

Backgound-color并没有完全填充div（我想在导航栏和页脚之间对div进行着色），背景颜色只能达到页面的一半，不像是一直向下流动直到结束容器。所以我希望你们能帮助解决问题的根源，因为我不知道是什么原因导致了这个问题：/

<!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>

这里是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

这样做

fcvt

将ecvt更改为您想要的任何颜色

Answer 2

我明白了，我注意到我正在为CONTAINER而不是WRAPPER着色..！呃...我感到很蠢......

背景颜色未完全填充div

2 个答案: