網站白色空間右側平板電腦的佈局

Question

嗨設計了一個網站，在普通瀏覽器中佈局很好，但只要我看看黑莓Playbook上的一個巨大的白色空間在右側。在蘋果設備上也是如此。這裏是CSS代碼，如果你想看看你是否可以看到http://u-zuki-designs.com/beta，你可以看到。謝謝你

`enter code here`/* 
Theme Name:u-zuki-designs 
Thema URL:www.u-zuki-designs.com 
Author Name:u-zuki-designs.com 
Version:1.0 
*/ 

@charset "utf-8"; 

/*Juneral Tag Properties Initilization*/ 
*{ 
    padding:0px; 
    margin:0px; 
} 

body{ 

} 

a{ 
    color:#ffffff; 
    text-decoration:none; 
} 

a:hover{ 
    text-decoration:none; 
    color:#ffffff; 
} 

a img{ 
    border:0px; 
    margin:0px; 
} 

ul li{ 
    list-style:none; 
    padding:0px; 
    margin:0px; 
} 

.clear{ 
    clear:both; 
} 

.leftside{ 
    float:left; 
} 

.rightside{ 
    float:right; 
} 

.main{ 
    width:100%; 
    margin:0px auto; 
} 
/*Juneral Tag Properties Initilization*/ 

/*Header Starting*/ 
.header{ 
    width:100%; 
    background:url(../images/header_bg.png) top left repeat-x; 
} 

.header_in{ 
    width:1000px; 
    margin:0px auto; 
    height:86px; 
} 

.header_menu{ 
    padding:35px 0px; 
} 

.header_menu ul li{ 
    float:left; 
    font-family:Tahoma, Geneva, sans-serif; 
    font-weight:lighter; 
    padding:0px 6px; 
} 

.header_menu ul li a{ 
    font-size:12px; 
    padding:4px 10px; 
} 

.header_menu ul li a.active{ 
    background:#252435; 
} 

.header_menu ul li a:hover{ 
    background:#252435; 

} 

/*Header Ending*/ 

/*Banner Starting*/ 
.banner{ 
    width:100%; 
    background:url(../images/banner_bg.png) top left repeat-x; 
} 

.banner_in{ 
    width:1000px; 
    margin:0px auto; 
    height:395px; 
} 

.banner_in h1{ 
    font-family:Arial, Helvetica, sans-serif; 
    color:#ffffff; 
    text-align:center; 
} 

.banner_in .slider{ 
    width:655px; 
    margin:0px auto; 
} 
/*Banner Ending*/ 

/*Content Starting*/ 
.content{ 
    width:100%; 
    background:url(../images/content_bg.png) top left repeat-x; 
    min-height:542px; 
} 

.content_in{ 
    margin:0px auto; 
    width:1000px; 
} 


.category{ 
    border-bottom:1px solid #efefef;  
} 

.category_in{ 
    width:210px; 
    margin:0px auto; 
} 

.category_in ul li{ 
    float:left; 
    padding:0px 3px; 
} 

.new_work{ 
    padding-left:90px; 
} 

.new_work .section_title h2{ 
    font-family:"Gotham Medium"; 
    font-weight:lighter; 
    font-size:18px; 
} 

.new_work .section_title a{ 
    color:#6dc6b6; 
    font-family:"Gotham Medium"; 
    font-size:10px; 
    padding:0px 150px 0px 100px; 
} 

.new_work .website{ 
    color:#959595; 
    font-family:"Gotham Medium"; 
    font-size:12px; 
} 

.new_work .identity{ 
    color:#959595; 
    font-family:"Gotham Medium"; 
    font-size:12px; 
} 

.new_work .photography{ 
    color:#959595; 
    font-family:"Gotham Medium"; 
    font-size:10px; 
} 

.new_work .website p, 
.new_work .identity p, 
.new_work .photography p{ 
    font-size:10px; 
} 

.new_work .website p span, 
.new_work .identity p span, 
.new_work .photography p span{ 
    color:#2eae96; 
} 

.new_work .website, 
.new_work .identity, 
.new_work .photography{ 
    width:150px; 
    padding:0px 10px; 
} 

.time_sep{ 
    font-size:10px; 
    color:#b6b6b6; 
    margin-left:100px; 
} 

.feature_icon_set{ 
    padding-left:130px; 
} 

.section_title_2 h3{ 
    font-family:"Gotham Medium"; 
    font-size:10px; 
} 

.section_title_2{ 
    padding-right:110px; 
} 

a.iconset{ 
    color:#42b4a1; 
    font-family:"Gotham Medium"; 
    font-size:10px; 
} 

.icon_set_display{ 
    background-color:#ffffff; 
    height:175px; 
    width:544px; 
} 

/*Content Ending*/ 

/*Footer Starting*/ 
.footer{ 
    width:100%; 
    background-color:#e3e3e3; 
} 

.footer_in{ 
    width:1000px; 
    margin:0px auto; 
    padding-left:200px; 
} 

.top_footer{ 

} 

.top_footer .aboutus{ 
    padding:25px; 
    width:150px; 
    font-family:"Gotham Medium"; 
    font-size:12px; 
    color:#9f9fa2; 
} 

.top_footer .facebookupdate{ 
    padding:25px; 
} 

.top_footer .recent_work{ 
    padding:25px; 
} 

.top_footer .recent_work img{ 
    padding:3px; 
} 

.top_footer .aboutus h4, 
.top_footer .facebookupdate h4, 
.top_footer .recent_work h4{ 
    font-family:"Gotham Medium"; 
    font-size:16px; 
    font-weight:normal; 
    color:#777777; 
} 

.bottom_footer{ 
    padding-left:25px; 
} 

.bottom_footer ul li{ 
    float:left; 
    color:#ccccce; 
    font-family:"Gotham Medium"; 
    padding:5px 3px; 
} 

.bottom_footer ul li a{ 
    color:#6e6e6e; 
    font-family:"Gotham Medium"; 
    font-size:10px; 
} 
/*Footer Ending*/ 

/*Font Initilization Starting*/ 

/*Font Initilization Ending*/ 

html code 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="../themes/pascal/pascal.css" type="text/css" media="screen" /> 
    <link rel="stylesheet" href="../themes/orman/orman.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>U-Zuki-Designs | The Secrect To Creativity</title> 
</head> 
<body> 
<!--Code Starting--> 
<div class="main"> 
    <!--Header Starting--> 
    <div class="header"> 
    <div class="header_in"> 
     <div class="logo leftside"> 
     <a href="index.html"><img src="images/logo1.png" alt=" " /></a> 
    <a href="index.html"><img src="images/logo2.png" alt=" " /></a> 
     </div> 
     <div class="header_menu rightside"> 
     <ul> 
      <li><a href="#" class="active">Home</a></li> 
      <li><a href="#">About Us</a></li> 
      <li><a href="#">Portfolio</a></li> 
      <li><a href="#">Services</a></li> 
     <li><a href="#">Contact Us</a></li> 
     </ul> 
     <div class="clear"></div> 
     </div> 
     <div class="clear"></div> 
    </div> 
    </div> 
    <!--Header Ending--> 
    <!--Banner Starting--> 
    <div class="banner"> 
    <div class="banner_in"> 
     <br /> 
     <h1>Welcome To Our Website</h1> 
     <br /> 
<div class="slider-wrapper theme-default"> 
<div class="ribbon"></div> 
     <!--<img src="images/banner_image.png" alt=" " />--> 

       <div id="wrapper"> 

       <div id="slider-wrapper"> 

        <div id="slider" class="nivoSlider"> 
         <img src="images/C.jpg" alt="" /> 
         <img src="images/b.jpg" alt=""/> 
         <img src="images/ab.jpg" alt="" /> 
         <img src="images/D.jpg" alt="" /> 
        </div> 
        <!--<div id="htmlcaption" class="nivo-html-caption"> 
         <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
        </div>--> 

       </div> 

      </div> 



     </div> 
    </div> 
    </div> 
    <!--Banner Ending--> 
    <!--Content Starting--> 
    <div class="content"> 
    <div class="content_in"> 
     <br /> 
     <div class="category"> 
     <div class="category_in"> 
      <!--<ul> 
      <li><a href="#"><img src="images/all.png" alt="" /></a></li> 
      <li><a href="#"><img src="images/news.png" alt="" /></a></li> 
      <li><a href="#"><img src="images/art.png" alt="" /></a></li> 
      <li><a href="#"><img src="images/web.png" alt="" /></a></li> 
      <li><a href="#"><img src="images/print.png" alt="" /></a></li> 
      <li><a href="#"><img src="images/illustration.png" alt="" /></a></li> 
      </ul> 
      <div class="clear"></div> 
      <br />--> 
     </div> 
     </div> 
     <br /> 
     <div class="new_work"> 
      <div class="section_title leftside"> 
       <h2>New Work</h2> 
       <br /> 
       <br /> 
       <a href="#"><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;> View all illustrations</h4></a> 
      </div> 
      <div class="website leftside"> 
       <span>Website</span><br /> 
       <img src="images/website.png" alt=" " /> 
       <p>Lorem Ipsum is simply dummy text of<span>typesetting industry.</span></p> 
      </div> 
      <div class="identity leftside"> 
       <span>Idenitity</span><br /> 
       <img src="images/identity.png" alt=" " /> 
       <p>Lorem Ipsum is simply dummy text of<span>typesetting industry.</span></p> 
      </div> 
      <div class="photography leftside"> 
       <span>Photography</span><br /> 
       <img src="images/photography.png" alt=" " /> 
       <p>Lorem Ipsum is simply dummy text of<span>typesetting industry.</span></p> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <br /> 
     <div class="time_sep"> 
      12.09.2011<img src="images/sep_date.png" alt=" " /> 
     </div> 
     <br /> 
     <div class="feature_icon_set"> 
      <div class="section_title_2 leftside"> 
      <h3>FEATURE: ICON SET</h3> 
      <br /> 
      <br /> 
      <br /> 
      <a href="#" class="iconset">> View full datalis</a> 
      </div> 
      <div class="icon_set_display leftside"> 
     <h2><p><b>Our Work</b></p></h2> 
     <br>Welcome to our online graphic design & Photography portfolio. we hope you will see the quality of the our creaitivity we produce and maybe get a understanding of our passion for what we do to add smiles to our clients faces</br> 



      </div> 
      <div class="clear"></div> 
      <br /> 
      <img src="images/sep2.png" alt=" " /> 
     </div> 
    </div> 
    </div> 
    <!--Content Ending--> 
    <!--Footer Starting--> 
    <div class="footer"> 
    <div class="footer_in"> 
     <div class="top_footer"> 
     <div class="aboutus leftside"> 
      <h4>Our Work</h4> 
      <p><br>Our work with our clients is to explore, architect, rebuild, revise, revisit, rebrand, rewrite, rearchitect, and we do it all from start to finish...</br></p> 
     </div> 
     <div class="facebookupdate leftside"> 
      <h4>facebook updates</h4> 
     </div> 
     <div class="recent_work leftside"> 
      <h4 style="padding-left:3px;">recent works</h4> 
      <img src="images/recent1.png" alt=" " class="leftside"/> 
      <img src="images/recent2.png" alt=" " class="leftside"/> 
      <img src="images/recent3.png" alt=" " class="leftside"/> 
      <div class="clear"></div> 
      <img src="images/recent4.png" alt=" " class="leftside"/> 
      <img src="images/recent5.png" alt=" " class="leftside"/> 
      <img src="images/recent6.png" alt=" " class="leftside"/> 
      <div class="clear"></div> 
     </div> 
     <div class="clear"></div> 
     <img src="images/footersep.png" alt=" " style="padding-left:25px;"/> 
     </div> 
     <div class="bottom_footer"> 
     <ul> 
      <li><a href="#">HOME</a></li> 
      <li>/</li> 
      <li><a href="#">ABOUT</a></li> 
      <li>/</li> 
      <li><a href="#">FAQ</a></li> 
      <li>/</li> 
      <li><a href="#">TERMS</a></li> 
      <li>/</li> 
      <li><a href="#">CONTACT</a></li> 
     </ul> 
     <div class="clear"></div> 
     </div> 
    </div> 
    </div> 
    <!--Footer Ending--> 
</div> 
<!--Code Ending--> 

    <script type="text/javascript" src="nivo-slider/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="nivo-slider/jquery.nivo.slider.pack.js"></script> 
    <script type="text/javascript"> 
    $(window).load(function() { 
     $('#slider').nivoSlider({}); 
    }); 
    </script> 
</body> 
</html> 

Answer 1

嘗試從下面的CSS

.footer_in{ 
    /*width:1000px;*/ 
    margin:0px auto; 
    padding-left:200px; 
} 

在不除去寬度屏幕快照除去寬度：

寬度從.footer_in屏幕快照除去：否水平滾動條。

Answer 2

我的猜測是由於頭部圖形和信息的寬度。如果你壓縮你的瀏覽器窗口，你會收到（我所假設的）相同的空白空間，因爲標題內容向右延伸得更遠。在一個不能顯示整個寬度的移動環境中，反過來也會拉伸並呈現該空白區域。

我知道這不是一個修復，但我認爲這是您看到的空白背後的原因。