网站发布黑色区域出现

我希望我可以发布像堆栈溢出这样的问题这是我第一次投资组合尝试！我试图创建一个工作组合，它迄今为止是一个非常好的学习限制，并希望继续作为一个载体的网页设计，即使我有更多的学习地狱！所以我的问题是...我有一个黑色的区域出现在页脚上方，我不知道如何解决它？任何人都可以帮忙吗？对不起，代码量太大。不知道如何将图标字体应用到片段，使他们看起来中国人，对不起:) 该片段是3列代码我试图添加到我的网站，这是造成问题的是codepen组合网站发布黑色区域出现

/*-------------------- 
 
Content Start 
 
--------------------*/ 
 
#content-container { 
 
position: relative; \t 
 
overflow: hidden; 
 
width: 900px; 
 
height: 300px; 
 
background: #D5D5D5; \t 
 
    margin: auto; 
 
    top: 210px; left: 0; bottom: 0; right: 0; \t 
 

 
\t 
 
} 
 

 
\t .container > div { 
 
\t \t border: 5px solid #fff; 
 
\t \t box-sizing: border-box; 
 
\t \t padding: 1em; 
 
\t } 
 

 
\t \t .main{ 
 
\t \t \t background: #F29C9C; 
 
\t \t } 
 
\t \t .c2 { 
 
\t \t \t background: #F3E59A; 
 
\t \t } 
 
\t \t .c3 { 
 
\t \t \t background: #9FE0F6; 
 
\t \t } 
 

 
\t @media screen and (min-width: 768px) { 
 

 
\t \t \t .main { 
 
\t \t \t \t width: 50%; 
 
\t \t \t \t float: left; 
 
\t \t \t \t margin-left: 25%; 
 
\t \t \t } 
 
\t \t \t .c2 { 
 
\t \t \t \t width: 25%; 
 
\t \t \t \t float: left; 
 
\t \t \t \t margin-left: -75%; 
 
\t \t \t } 
 
\t \t \t .c3 { 
 
\t \t \t \t width: 25%; 
 
\t \t \t \t float: right; 
 
\t \t \t } 
 
\t \t } 
 
/*-------------------- 
 
Content End 
 
--------------------*/

<div class="pattern"> 
 
    \t <div class="container"> 
 
\t  \t <div class="main"> 
 
\t \t \t  <h2>Main Content (1st)</h2> 
 
\t \t \t  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent ante sapien, luctus pulvinar ultricies quis, aliquet in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent ante sapien, luctus pulvinar ultricies quis, aliquet in mi.</p> 
 
\t \t  </div> 
 
    <div class="c2"> 
 
\t \t \t  <h3>Column (2nd)</h3> 
 
\t \t \t  <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p> 
 
\t \t  </div> 
 
\t \t  <div class="c3"> 
 
\t \t \t  <h3>Column (3rd)</h3> 
 
\t \t \t  <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p> 
 
    \t \t </div> 
 
\t </div> 
 
</div>

https://codepen.io/trigg/pen/OXxmrk

当浏览器宽度为收缩显示黑色区域。

来源

2016-07-09 Lawrence William Trigg

我看不到任何页脚上方的黑色区域 – Thinker

我也没有。不在你的代码片段上，或在codepen上。 – BurningLights

我应该提到，将浏览器的宽度缩小到400/500px左右？ –

的问题是你的页脚的top: 210px;和你身体的margin : 0 0 150px;

因此，要解决这个问题，插入一个resonsive CSS代码：

@media screen and (max-width: 900px) { 
    body{ 
     margin: 0; 
    } 
    #footer { 
     top: 0px; 
    } 
}

现在对于屏幕比900px旧的CSS值将被删除较小。

来源

2016-07-09 14:15:51 GramThanos

谢谢，我非常感谢您的回复！ –

嘿，它怎么还存在？我不明白为什么这个黑色区域不断出现？ https://codepen.io/trigg/pen/OXxmrk 如果你能帮我，我真的很感激:) –

我没有看到我在CSS给你的代码。你救了吗？ – GramThanos

网站发布黑色区域出现

回答

相关问题