缩放时，标题右侧的空白区域 [英] 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屋！