背景顏色表單容器div顯示在主內容區域

我需要一些幫助來隱藏我的容器div的背景顏色。主要內容區域是這樣一種結構，即物品標籤堆疊在彼此的頂部，然後腳註應該佔據剩下的空間。背景顏色表單容器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>

來源

2017-06-18 Ogbobe Buko

如果你看到藍色背景的唯一時間是UL的背後，你可以刪除從包裝的藍色背景，並將其應用到UL？ – James

感謝詹姆斯，我也想這樣做，作爲最後的手段，但我更願意理解爲什麼這樣的背景下正顯示出侵佔了它們的包含元素的全寬 –

這裏有兩種解決方案，你可以使用：

footer { 
    margin-top:-13px; 
}

或：

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

這將修復您的頁腳和內容之間的差距。

來源

2017-06-18 18:52:17 Lindow

感謝Lindow塊級元素，但問題是，我仍然希望來自文章標籤的邊距，以便在頁腳和內容之間留有空白。但我也失去了升技，爲什麼它正在發生的事情，他們都是塊級元素佔用內容div..i的整個寬度所期望的，他們只是疊起，不留任何空間，除非你加保證金，我做到了。但對我來說我設定的保證金無法正常工作，因爲內容div的背景顏色不應該顯示，如果按照正常的內容流的 –

你應該使用填充底部上添加空白其間頁腳和內容'＃content'而不是使用背景差距。 – Lindow

背景顏色表單容器div顯示在主內容區域

回答

相關問題