html - 100% Web ページの空きスペース

Question

今日、私の Web ページの小さい画面の右側に空白があることに誰かが気づきました。私は問題を見つけるために一生懸命働いていますが、まだ見つけていません。

ここに画像の説明を入力

ご覧のとおり、私のウェブサイトの横に灰色の空白スペースがあります。幅を 100% に設定し、最小幅を 1020px に設定します。

より大きな画面では、問題は自然に解決し、Web サイトの幅は 100% になります。

誰かがこの問題を覚えているか、解決方法を知っていますか?

http://tinyurl.com/c2ohcpuで表示可能な Web サイト

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>

score 0 · Accepted Answer

ご提供いただいたコードで問題を再現することはできませんが、お客様のウェブサイトで再現することはできます。奇妙な問題。クイックフィックスは、min-widthを削除し、body要素とhtml要素のwidthをautoから1020pxに変更し、overflow：hiddenをbodyに追加することです。幸運を！

score 0 · Accepted Answer

あなたが 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;">

score 0 · Accepted Answer

私自身の質問への答え

見つけた！Facebookのいいねボタンでした。幅を400pxに設定しました（理由はわかりません）。そのため、レイアウトから押し出されました。data-width="400" を data-width="200" に置き換えたところ、すべてが正常に戻っていることがわかりました。みんなTnx！

html - 100% Web ページの空きスペース

3 に答える 3

Related

Reference