100％網頁的空白空間

Question

今天有人注意到我的網頁在較小的屏幕上右側有空白區域。我正在努力尋找問題，但我還沒有找到它。

正如你看到的，有一個灰色的空白旁邊我的網站。寬度設置爲100％，最小寬度設置爲1020像素。

在較大的屏幕上，問題自行解決，網站的正確寬度爲100％。

有人回想起這個問題，或者知道如何解決它嗎？

網站上http://tinyurl.com/c2ohcpu

CSS代碼可視

html,body { 
    margin:0px; 
    width: 100%; 
    min-width:1020px; 
    background-color: #eaeeef; 
    padding: 0px; 
    font-family: Arial; 
    font-size: 12px; 
    color: #7f8386; 
} 
img { 
    border: 0; 
} 
#f-container { 
    width: 100%; 
    height: auto; 
} 
#h-container { 
    width: 100%; 
} 
#container { 
    width: 1020px; 
    height: auto; 
    margin: 0 auto; 
    padding-top: 10px; 
    margin-top: -1px; 
    background-image: url('../images/container_bg.png'); 
    background-repeat: repeat-y; 
    border: 1px solid #d4d6d7; 
    margin-bottom: 10px; 

} 
#header { 
    width: 100%; 
    height: 59px; 
    background-image: url('../images/header-repeat.png'); 
    background-repeat: repeat-x; 
    min-width: 1020px; 
    z-index: 10000; 
    float: left; 
} 
#header #h-container { 
    width: 1020px; 
    height: 59px; 
    margin: 0 auto; 
} 
#header #logo-container { 
    width: 414px; 
    height: 40px; 
    margin-left: 10px; 
    border: 0; 
    float: left; 
} 
#header h1 { 
    margin:0; 
    padding:0; 
} 
#header #logo-container #logo { 
    width: 414px; 
    height: 40px; 
} 
#header #topMenu { 
    width: 580px; 
    height: 50px; 
    margin-right: 10px; 
    float: right; 
} 
#header #topMenu ul.menu { 
    height: 50px; 
    margin: 0; 
    padding: 0; 
    float: right; 
} 
#header #topMenu ul.menu li { 
    list-style-type: none; 
    float: left; 
    padding-left: 10px; 
    padding-right: 10px; 
    height: 50px; 
} 
#header #topMenu ul.menu li:hover, #header #topMenu ul.menu li.current { 
    background-image: url('../images/menu_active.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
} 
#header #topMenu ul.menu li a { 
    text-decoration: none; 
    display: block; 
    height: 50px; 

} 
/* Home */ 
#header #topMenu ul.menu .item-102 a { 
    background-image: url('../images/menu/home.png'); 
    width: 58px; 
} 
/* Nieuws */ 
#header #topMenu ul.menu .item-103 a { 
    background-image: url('../images/menu/nieuws.png'); 
    width: 71px; 
} 
/* Diensten */ 
#header #topMenu ul.menu .item-104 a { 
    background-image: url('../images/menu/diensten.png'); 
    width: 80px; 
} 
/* Portfolio */ 
#header #topMenu ul.menu .item-105 a { 
    background-image: url('../images/menu/portfolio.png'); 
    width: 81px; 
} 
/* Contact */ 
#header #topMenu ul.menu .item-106 a { 
    background-image: url('../images/menu/contact.png'); 
    width: 75px; 
} 
/* Hosting */ 
#header #topMenu ul.menu .item-115 a { 
    background-image: url('../images/menu/hosting.png'); 
    width: 72px; 
} 



#content-left { 
    width: 750px; 
    height: auto; 
    float: left; 
    padding: 10px; 
} 
p { 
    padding: 0px; 
    margin: 0px; 
} 
#content-left h2.title { 
    color: #33393e; 
    font-size: 13pt; 
    width: 100%; 
} 
#content-left h2 a { 
    display: block; 
    color: #33393e; 
    text-decoration: none; 
    font-size: 13pt; 
} 
#content-left ul.actions{ 
    display: none; 
} 
#content-left .item-block { 
    width: 100%; 
    height: auto; 
    border-bottom: 1px dashed #d4d6d7; 
    padding-bottom: 20px; 
} 

#content-left .item-block .published { 
    width: 745px; 
    background: #CCEBF5; 
    color: black; 
    padding-top: 3px; 
    padding-left: 5px; 
    height: 17px; 
    margin-bottom: 5px; 
} 



#content-right { 
    width: 230px; 
    height: auto; 
    float: right; 
    padding: 10px; 
} 
#content-right h2.title { 
    color: #33393e; 
     font-size: 13pt; 
     width: 100%; 
    } 
    #content-right h2 a { 
     display: block; 
     color: #33393e; 
     text-decoration: none; 
     font-size: 13pt; 
} 
h2 a:hover { 
    font-weight: bold; 
    cursor: pointer; 
} 
#footer { 
    width: 100%; 
    text-align: center; 
    margin-top: 5px; 
    height: auto; 
} 
#content-right .item-block { 
    width: 100%; 
    height: auto; 
    border-bottom: 1px dashed #d4d6d7; 
    padding-bottom: 20px; 
} 



a { 
    color: #0099cc; 
    text-decoration: none; 
    font-weight: bold; 
} 
a:hover { 
    font-weight: normal; 
} 

.portfolio-image { 
    margin: 0 auto; 
    width: 700px; 
    height: auto; 
    display: block; 
} 

HTML代碼

<?xml version="1.0" encoding="utf-8?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl-nl" lang="nl-nl" dir="ltr" > 
    <head> 
     <link rel="stylesheet" href="/templates/hiddenhidden/css/template.css" /> 
     <link href="/templates/hiddenhidden/css/uni-form.css" rel="stylesheet" type="text/css" /> 
     <link href="/templates/hiddenhidden/css/default.uni-form.css" rel="stylesheet" type="text/css" /> 
     <link href="/templates/hiddenhidden/jqueryui/css/pepper-grinder/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" /> 
     <link href="/templates/hiddenhidden/css/screen.css" rel="stylesheet" type="text/css" /> 
     <link rel="stylesheet" type="text/css" href="/templates/hiddenhidden/css/jquery.lightbox-0.5.css" media="screen" /> 
     <link rel="shortcut icon" href="/templates/hiddenhidden/images/favicon.ico" /> 
     <script type="text/javascript" src="/templates/hiddenhidden/js/jquery.js"></script> 
     <script type="text/javascript" src="/templates/hiddenhidden/js/uni-form.jquery.min.js"></script> 
     <script type="text/javascript" src="/templates/hiddenhidden/js/uni-form-validation.jquery.min.js"></script> 
     <script type="text/javascript" src="/templates/hiddenhidden/js/jquery.lightbox-0.5.min.js"></script> 
     <script type="text/javascript" src="/templates/hiddenhidden/jqueryui/js/jquery-ui-1.8.16.custom.min.js"></script> 
     <script type="text/javascript" src="/templates/hiddenhidden/js/easySlider1.7.js"></script> 
     <script type="text/javascript"> 
      $(function() { 
       $('a.lightbox').lightBox({ 
        imageLoading:'/templates/hiddenhidden/images/lightbox-ico-loading.gif', 
        imageBtnPrev:'/templates/hiddenhidden/images/lightbox-btn-prev.gif', 
        imageBtnNext:'/templates/hiddenhidden/images/lightbox-btn-next.gif', 
        imageBtnClose:'/templates/hiddenhidden/images/lightbox-btn-close.gif', 
        imageBlank:'/templates/hiddenhidden/images/lightbox-blank.gif' 
       }); 

      }); 
     </script> 
      <base href="http://hiddenhidden.nl/" /> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <meta name="keywords" content="" /> 
    <meta name="description" content="" /> 
    <meta name="generator" content="Joomla! - Open Source Content Management" /> 
    <title>hidden hidden</title> 
    <link href="/?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" /> 
    <link href="/?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" /> 
    <link rel="stylesheet" href="/modules/mod_portfolio/portfolio.css" type="text/css" /> 
    <script src="/media/system/js/mootools-core.js" type="text/javascript"></script> 
    <script src="/media/system/js/core.js" type="text/javascript"></script> 
    <script src="/media/system/js/caption.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
window.addEvent('load', function() { 
       new JCaption('img.caption'); 
      }); 
    </script> 


<script type="text/javascript"> 

      var _gaq = _gaq || []; 
      _gaq.push(['_setAccount', '']); 
      _gaq.push(['_trackPageview']); 

      (function() { 
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
      })(); 

     </script> 

    </head> 
    <body> 
    <div id="fb-root"></div> 
    <script type="text/javascript">(function(d, s, id) { 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) return; 
     js = d.createElement(s); js.id = id; 
     js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk'));</script> 
    <div id="f-container"> 
     <div id="header"> 
      <div id="h-container"> 
      <h1> 
      <a href="/" id="logo-container" title="hidden hidden"> 
       <img src="/templates/hiddenhidden/images/logo_with_slogan.png" id="logo" alt="hidden hidden" /> 
      </a> 
      </h1> 

      <div id="topMenu"> 

<ul class="menu"> 
<li class="item-102 current active"><a href="/" ></a></li><li class="item-103"><a href="/nieuws" ></a></li><li class="item-104"><a href="/diensten" ></a></li><li class="item-115"><a href="/hosting" ></a></li><li class="item-105"><a href="/portfolio" ></a></li><li class="item-106"><a href="/contact" ></a></li></ul> 
      </div> 
      </div> 
      <div style="clear:both;"></div> 
     </div> 
     <div id="container"> 


      <div id="content-left"> 

<div id="system-message-container"> 
</div> 
       <div class="blog-featured"> 

<div class="items-leading"> 
      <div class="leading-0"> 

    <h2 class="title"> 
        <a href="/7-home/1-welkom-op-hidden-hidden"> 
      Welkom op hidden hidden!</a> 
      </h2> 

<!-- BEGIN --> 

<div class="item-block"> 






<div class="item-text"> 




<div class="item-separator"></div> 

</div></div> 
<div class="item-bottom"></div>  </div> 
      </div> 



</div> 

           <h2 class="title">Onze Portfolio</h2> 
       <div class="item-block"> 
        <div class="item-text"> 

    <div id="portfolio-slider" > 

        </div>  <div style="clear:both;"></div> 
      <ul class="ui-tabs-nav"> 
         </ul> 
</div> 
<script type="text/javascript"> jQuery(function() { jQuery("#portfolio-slider").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); });</script> 
<div style="clear:both;"></div>     </div> 
       </div> 
       <div class="item-bottom"></div> 


       <div id="footer"> 
        Copyright&copy; 
        2010 - 2012     hidden hidden. Alle rechten voorbehouden. | <a href="/component/xmap/?view=html&amp;id=2">Sitemap</a> 
       </div> 
      </div> 

      <div id="content-right">    <h2 class="title">Contact</h2> 
       <div class="item-block"> 
        <div class="item-text"> 


<div class="custom" > 
</div> 
        </div> 
       </div> 
       <div class="item-bottom"></div> 

         <h2 class="title">Offerte aanvragen</h2> 
       <div class="item-block"> 
        <div class="item-text"> 


<div class="custom" > 
    <p>Offerte aanvragen? Dat kan via ons <a href="/contact/?view=form">contactformulier</a>.</p></div> 
        </div> 
       </div> 
       <div class="item-bottom"></div> 

         <h2 class="title">Sociaal</h2> 
       <div class="item-block"> 
        <div class="item-text"> 
         <div id="facebook-container"></div><br /> 
<a href="http://facebook.com/hiddenhidden/" title="hidden hidden op Facebook"> 
    <img src="/modules/mod_social/networks/facebook.png" style="border: 0;" alt="hidden hidden op Facebook" /> 
</a> 
<a href="http://twitter.com/hiddenwebsolution" title="hidden hidden op Twitter"> 
    <img src="/modules/mod_social/networks/twitter.png" style="border: 0;" alt="hidden hidden op Twitter" /> 
</a> 
<a href="http://linkedin.com/company/hidden-hidden" title="hidden hidden op Linkedin"> 
    <img src="/modules/mod_social/networks/linkedin.png" style="border: 0;" alt="hidden hidden op Linkedin" /> 
</a> 
<script type="text/javascript" src="/modules/mod_social/mod_social.js"></script>     </div> 
       </div> 
       <div class="item-bottom"></div> 


    </div> 
      <div style="clear:both;"></div> 
     </div> 
     </div> 
    </body> 
</html> 

Answer 1

我無法重現該問題與您提供的代碼，但我可以在y上我們的網站。奇怪的問題。 quickfix將刪除最小寬度，在body和html元素上將寬度從auto更改爲1020px，並添加overflow：隱藏到body。 祝你好運！

Answer 2

Awnser我自己的問題

我找到了！這是Facebook的按鈕。我已經將寬度設置爲400px（我不知道爲什麼）。所以它被推出了佈局。我用data-width =「200」替換了data-width =「400」，並知道everthing恢復正常。 Tnx大家！

Answer 3

在您提到Facebook Like按鈕之後，我檢查了代碼，並且它在邊欄內突出顯示寬度爲400px的跨度（正如它的父div一樣）。

<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://facebook.com/keimwebsolutions" data-send="true" data-layout="button_count" data-width="400" data-show-faces="false" data-font="arial"><span style="height: 20px; width: 400px;">