Question

我需要一些帮助才能隐藏容器div的背景颜色。

主要内容区域的结构是这样的：文章标签堆叠在一起，然后页脚应该占用剩余的空间。

我试图在保留边距的同时摆脱文章标签和页脚之间的空间。换句话说，我想摆脱蓝线。

有人能给我一些如何实现这个目标的提示吗？

#container {
    background-color: #004bb8;
    min-width: 320px;
    max-width: 960px;
}


/*------Header-----*/
header {
    background-color: lightsalmon;
    border-bottom: solid #65ff09 2px;
}

h1, h2 {
    font-family: "Impact";
    margin: 0px;
    padding: 0px;
    color: darkred;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 4px;
}

#image-container {
    float: left;
    width: 46%;
    margin: 0 1% 0 1%;
    padding: 1%;
}

#sitename{
    float: left;
    width: 46%;
    margin: 0 1% 0 1%;
    padding: 8% 1% 1% 1%;
}

header::after {
    content: "";
    display: block;
    clear: left;
}

header img {
    width: 250px;
    margin: 0 auto;
}

header h1 {
    font-family: "Abel", sans-serif;
    text-transform: uppercase;
    font-size: 1.5em;
    padding: 10px 10px;
    color: #f9db00;
    
}

header h2 {
    font-family: "Abel", sans-serif;
    text-transform: uppercase;
    font-size: 0.8em;
    padding: 10px 10px;
    color: #ff2a86;
}



/*-------navigation------*/
nav {
    width: 100%;
    background-color: 
}
nav ul li {}
nav ul li a {
    display: block;
    text-align: center;
    border-radius: 5px;
    padding: 0.5em;
    margin: .3em;
    border: 1px solid #fff;
    background-color: #004bb8;
    text-decoration: none;
    color: #fff;
}

nav ul li.active a {
    background-color: #b8005c;    
}

nav ul li a:hover {
    background-color: #f9db00;
    color: #323C40
}



/*-------content------*/
#content {
    min-height: 5em;
    background-color: #fff;
}

#content article {
    margin: 0 2%;
}

#content article.News, #content article.Tweets {
    background-color: #ddd;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
} 

article.News h2, article.Tweets h2 {
    background-color: darkgray;
    color: #fff;
    padding: 0.5em;
    font-size: 0.8em;
}
article.News h2 {background-color: #004bb8;}
article.Tweets h2 {background-color: #b8005c;} 

article.News h3, article.Tweets h3 {
    padding: 0.5em 0 0 1%;
    font-size: 1.0em;
}

article.News h3 {color: #004bb8;}
article.Tweets h3 {color: #b8005c;}

article.News p, article.Tweets p {
    color: #666;
    font-size: 0.8em;
    padding-left: 1%;
    padding-right: 1%;
    line-height: 120%;

}
#contents article.Tweets::after {
    content: "";
    display: block;
    clear: left;
}

/*-------footer------*/
footer {
    clear: both;
    text-align: center;
    padding: 1em;
    background-color: #111;
    color: #fff;
    font-size: 0.6em;
}


/*---------IMAGES------------*/

figure.w100 {
    overflow: hidden;
    width: 100%;
}

figure.w33 {
    width: 96%;
    border: 1px solid #999;
    margin: 0.3em 0 0.3em 2%; 
}
figure.w33 img {
    width: 100%;
}

figure.w100 img {
    width: 100%;

}

#content figcaption {
    text-align: center;
    font-size: 0.6em;
    color: #777;
    padding: 0.3em;
}

<body>
        <div id="wrapper">
            <div id="container">
                <header>
                    <div id="image-container">
                        <img src="img/logo.png" alt="logo">
                    </div>
                    <div id="sitename">
                        <h1>Responsive Design</h1>
                        <h2>Don't Settle for Less</h2>
                    </div>                   
                
                </header>

                <!--------Page Navigation Links -->
                <nav>
                    <ul>
                        <li><a href="#">Desktop Work Around</a></li>
                        <li class="active"><a href="#">Phone-Default</a></li>
                        <li><a href="#">Tablet Enhancement</a></li>
                        <li><a href="#">Reset CSS</a></li>
                    </ul>
                </nav>
                 <!--------Page Content -->
                <div id="content">
                    
                    <figure class="w100">
                        <img src="img/lake.jpeg" alt="lake">
                    </figure>
                    <article>
                        <h2> Lorem Ipsum</h2>
                        <figure class="w33">
                            <img src="img/car.jpeg" alt="car">
                            <figcaption> what i wish to drive when i get super rich</figcaption>
                        </figure>
                        <p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros.         Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
                        </p>
                    </article>

                    <div class="row">

                        <article class="News">
                            <h2>News</h2>
                            <h3>A list apart finally goes responsive</h3>
                            <p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros.         Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
                            </p>

                            <h3>A list apart finally goes responsive</h3>
                            <p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros.         Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
                            </p>
                        </article>
                    
                        <article class="Tweets">
                            <h2>Tweets</h2>
                            <h3>A list apart finally goes responsive</h3>
                            <p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros.         Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
                            </p>

                            <h3>A list apart finally goes responsive</h3>
                            <p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros.         Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
                            </p>
                        </article>
                    </div>
                    

                </div>
                <!-----End of Content --->

                <footer>
                    <p>&copy; Buko Ogbobe Responsive Start File</p>
                </footer>

            </div> <!----end of Container ---->
        </div> <!----end of Wrapper ---->        

    </body>

Answer 1

这里有两个解决方案，您可以使用：

footer {
    margin-top:-13px;
}

或：

#content article.Tweets, article.Tweets p {
    margin-bottom:0px;
}

这将解决页脚和内容之间的差距。

背景颜色表单容器Div显示在主要内容区域中

1 个答案: