【发布时间】：2014-05-16 14:01:17
【问题描述】：
我一直在处理这个网页时遇到了这个问题。每当我在我的 Mac 上查看 google chrome 中的页面时，当我向右滚动时，我会在页面右侧获得一小块空间。我不确定如何解决这个问题。这是一张显示我正在谈论的内容的图像，以及我的 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%;
}
【问题讨论】：
标签： html css width overflow viewport