Question

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

/*--------------------
Content Start
--------------------*/
#content-container {
position: relative;	
overflow: hidden;
width: 900px;
height: 300px;
background: #D5D5D5;	
  margin: auto;
  top: 210px; left: 0; bottom: 0; right: 0;	

	
}

	.container > div {
		border: 5px solid #fff;
		box-sizing: border-box;
		padding: 1em;
	}

		.main{
			background: #F29C9C;
		}
		.c2 {
			background: #F3E59A;
		}
		.c3 {
			background: #9FE0F6;
		}

	@media screen and (min-width: 768px) {

			.main {
				width: 50%;
				float: left;
				margin-left: 25%;
			}
			.c2 {
				width: 25%;
				float: left;
				margin-left: -75%;
		  	}
		  	.c3 {
		  		width: 25%;
				float: right;
		  	}
		}
/*--------------------
Content End
--------------------*/

<div class="pattern">
  	<div class="container">
	    	<div class="main">
			      <h2>Main Content (1st)</h2>
			      <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>
		    </div>
    <div class="c2">
			      <h3>Column (2nd)</h3>
			      <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p>
		    </div>
		    <div class="c3">
			      <h3>Column (3rd)</h3>
			      <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p>
    		</div>
	  </div>
</div>

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

当浏览器宽度缩小时，会出现黑色区域。

Answer 1

问题在于您的页脚top: 210px;和您的身体margin : 0 0 150px;

所以要修复它，插入一个resonsive css代码：

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

现在，对于小于900px的屏幕，将删除旧的css值。

网站问题黑区出现

1 个答案: