Question

我一直在处理这个我一直在努力的网页上的问题。每当我在Mac上查看谷歌浏览器中的页面时，当我滚动到右侧时，我会在页面右侧获得一小段空间。我真的不确定如何解决这个问题。这是一张图片来展示我正在谈论的内容，以及我的html和CSS。提前感谢任何可以帮助我的人。

图像： http://imgur.com/0JAZsgg&KcUfJZl&ephxQZC#2

这是我的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../scripts/javascript/responsive_drop_down.js"></script>
    <link href="../css/main_stylesheet.css" rel="stylesheet" type="text/css" media="screen"/>
    <link href="../css/print_stylesheet.css" rel="stylesheet" type="text/css" media="print"/>
</head>

<body>
    <div id="wrapper">
        <header>
            <h1>This is a placeholder <br />
                for header</h1>
        </header>

        <nav class="nm">
            <div class="mobilmenu"></div>
            <div class="mobile-container">
                <ul>
                    <li class="white"><a href="#">Home</a></li>
                    <li class="red"><a href="#">Video</a></li>
                    <li class="purple"><a href="#">Pictures</a></li>
                    <li class="blue"><a href="#">Audio</a></li>
                    <li class="green"><a href="#">Other Work</a></li>
                    <li class="yellow"><a href="#">About Me</a></li>
                    <li class="gray"><a href="#">Contact Me</a></li>
                </ul>
            </div>    
        </nav>

        <div class="content-container">

            <article class="content-main">
                <section>
                    <h1>Heading goes here...</h1>
                    <time datetime="#">Time will go here.</time>
                    <p>Content will go here...</p>
                </section>
            </article>

            <aside class="sidebar">
                    <p>More Content to come soon.</p>
            </aside>
        </div>    

        <div class="footer-position">
            <footer>
                <span class="copyright">All rights reserved 2014.</span>

                <nav class="nf">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Video</a></li>
                        <li><a href="#">Pictures</a></li>
                        <li><a href="#">Audio</a></li>
                        <li><a href="#">Other Work</a></li>
                        <li><a href="#">About Me</a></li>
                        <li><a href="#">Contact Me</a></li>
                    </ul>
                  </nav>
              </footer>
           </div>    
       </div>
   </body>
</html>

这是css：

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic);
@font-face 
{
font-family: 'bebas_neueregular';
src: url('../font/BebasNeue/bebasneue-webfont.eot');
src: url('../font/BebasNeue/bebasneue-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../font/BebasNeue/bebasneue-webfont.woff') format('woff'), 
     url('../font/BebasNeue/bebasneue-webfont.ttf') format('truetype'), 
     url('../font/BebasNeue/bebasneue-webfont.svg#bebas_neueregular') format('svg'), 
     url('../font/BebasNeue/BebasNeu.otf') format('opentype');
font-weight: normal;
font-style: normal;

}


body
{
width:100%;
font-family: 'Ubuntu', sans-serif;
margin:0;
padding:0;
background-color:#84888B;
overflow-y:scroll;
direction:ltr;
display:block;
}

#wrapper
{
display:block;
width:100%;
margin:0 auto;
padding:0 auto;
}

header
{
font-family:'bebas_neueregular', sans-serif;
background-color:#5D0660;
color:#E21208;
text-align:center;
padding:15px;
}

nav
{
display:block;
font-family:'bebas_neueregular', sans-serif;
text-align:center;
overflow:hidden;
}

nav ul
{
list-style:none;
}

nav ul li
{
display:inline-block;
}

nav ul li a
{
text-decoration:none;
}

nav.nm
{
width:100%;
background-color:#000000;
font-size:125%;
margin:0;
padding:0;
}

nav.nm ul
{
margin:0 auto;
margin-top:0;
}

nav.nm ul li a
{
display:block;
color:#ffffff;
padding:15px 16px;
}

nav.nm ul li a:hover
{
color:#000000;
-webkit-transition:450ms ease;
-moz-transition:450ms ease;
transition:450ms ease;
}

nav.nm ul li.white a:hover
{
background-color:#ffffff;
}

nav.nm ul li.red a:hover
{
background-color:#E21208;
}

nav.nm ul li.purple a:hover
{
background-color:#9E00A3;
}

nav.nm ul li.blue a:hover
{
background-color:#1A297F;
}

nav.nm ul li.green a:hover
{
background-color:#319032;
}

nav.nm ul li.yellow a:hover
{
background-color:#E1E13D;
}

nav.nm ul li.gray a:hover
{
background-color:#84888B;
}

nav.nf
{
font-size:85%;
}

nav.nf ul li:last-child 
{
border-right:none;
}

nav.nf ul li 
{
border-right:1px solid #000000;
}

nav.nf ul li a
{
display:block;
padding:2px 9px;
color:#000000;
}

nav.nf ul li a:hover
{
color:#ffffff;
}



footer
{
width:100%;
background-color:#1A297F;
text-align:center;
margin-top:38.6%;
padding:0.2%;
}

Answer 1

我刚刚在Windows 8机器上尝试过您的代码，但我找不到任何问题。您的屏幕截图看起来像边距问题。如果你不熟悉边缘和填充如何在html dog上运行这个小图帮助我理解它是如何工作的：

http://www.htmldog.com/guides/css/beginner/margins/

如果问题是针对Mac上的谷歌浏览器特有的（不幸的是我无法访问），我认为该版本的Chrome的默认CSS样式可能会受到妨碍。一个好的CSS重置可以解决问题：

http://meyerweb.com/eric/tools/css/reset/

只需将该代码复制并粘贴到您的CSS文件中，任何适当超过CSS重置的代码都将优先，留下重置以修复浏览器之间的任何微小差异。

小空间一直显示在我网站的右侧

1 个答案: