缩放时,标题右侧的空白区域 [英] White space on right side of header on zoom
问题描述
我正在开发此网站。
我遇到的问题是放大时在标题右侧的空白处。我做了各种各样的事情,但未能用黑色填充标题部分的区域。
相关的CSS代码:(我没有粘贴整个代码,因为它太冗长了,你可以在网站上找到它)
header
{
float:left;
宽度:100%;
height:700px;
背景:#000000;
-webkit-box-shadow:rgba(0,0,0,0.5)0px 0px 5px;
-moz-box-shadow:rgba(0,0,0,0.5)0px 0px 5px;
box-shadow:rgba(0,0,0,0.5)0px 0px 5px;
}
.header_main
{
background:#000000;
-webkit-box-shadow:rgba(0,0,0,0.5)0px 0px 5px;
-moz-box-shadow:rgba(0,0,0,0.5)0px 0px 5px;
box-shadow:rgba(0,0,0,0.5)0px 0px 5px;
float:left;
height:800px;
宽度:100%;
}
请按照以下建议操作:
1 .slideshow {margin:-10px 0 0 50px;}
class .slideshow
2 .headrouter {padding-left:100px;宽度:1200px;}
删除填充左侧并设置宽度:1100px
3 #site_content {margin-left: 50像素; }
删除margin-left
<4>将overflow-x:hidden隐藏到下面的body中:
body {
背景:无重复滚动0 0 #FFFFFF;
字体:80%Arial,Helvetica,sans-serif;
overflow-x:hidden;
}
这应该可以解决问题。
I am developing this website.
The problem I am facing is white space on right side of header on zoom in. I did all sorts of things but failed to fill the white with area of header part with black.
Relevant CSS code: (I am not pasting the whole code as it is too lengthy, you can find it in the website)
header
{
float:left;
width:100%;
height:700px;
background:#000000;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
}
.header_main
{
background: #000000;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
float:left;
height:800px;
width:100%;
}
There are lot of issues , follow as suggested below:
1 .slideshow{margin: -10px 0 0 50px;}
Remove this line from the class .slideshow
2 .headrouter{ padding-left:100px; width:1200px;}
Remove padding-left and set width:1100px
3 #site_content {margin-left:50px; }
remove margin-left
4 Add overflow-x:hidden to body like below:
body {
background: none repeat scroll 0 0 #FFFFFF;
font: 80% Arial,Helvetica,sans-serif;
overflow-x: hidden;
}
That should resolve the issue.
这篇关于缩放时,标题右侧的空白区域的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!