当我将窗口大小调整为小于1150px时，我在页面的右下角会出现一个扩展的白色块。我已经尝试了所有我能想到的东西，找不到任何可行的东西..
这是HTML：
<!doctype HTML>
<html>
<head>
<title></title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Add mousewheel plugin (this is optional)
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel- 3.0.6.pack.js"></script>
-->
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Orienta' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="head100">
<div id="head"><a href="index.php"><img src="img/head.png" alt="" /></a></div>
</div>
<div id="nav100">
<div id="nav">
<ul id="menu">
<li class="contact"><a href="contact.php">Contact</a></li>
<li class="resume"><a href="resume.php">Resume</a></li>
<li class="development"><a href="development.php">Development</a></li>
<li class="design"><a class="selected" href="design.php">Design</a></li>
</ul>
</div>
</div>
<div id="body100">
<div id="body"> <div id="mainPic">
<div id="myCarousel" class="carousel slide carousel-fade">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src="img/bodypic.jpg" alt="Carousel" /></div>
<div class="item"><img src="img/bodypic2.jpg" alt="Carousel" /></div>
<div class="item"><img src="img/bodypic3.jpg" alt="Carousel" /></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<img id="welcome" src="img/welcome.png" alt="Welcome to my portfolio!" />
<br />
<div id="welcomeunder">Take a look around and feel free to <a href="contact.php">Contact Me</a> with any questions.<br />Enjoy! <span id="smiley">☻</span></div>
</div>
</div>
<div id="amBG" class="amBG">
<div id="aboutMe">
<img src="img/me.png" id="me" alt="Me" />
<img src="img/aboHead.png" id="aboHead" alt="About Me" />
<p>
I'm a web developer / designer currently doing freelance work and seeking full time employment. Suspendisse et lacus vel lectus cursus rhoncus ac ac purus. Mauris massa ante, tempor sit amet mi eget, mattis semper arcu. Duis ipsum elit, ornare eu urna ac, faucibus aliquam quam. Etiam vel malesuada est, at vestibulum nulla. Etiam malesuada eget lorem eget lobortis. Praesent eu urna est. Aenean in magna vel arcu bibendum tristique. Cras accumsan sed purus eget facilisis. Maecenas a tempus velit. Nunc felis turpis, scelerisque rutrum mi quis, convallis fermentum ipsum. Mauris ut tristique magna, id consequat metus.
</p>
</div>
</div>
<footer>
<div id="foot">
<div id="footRight">
<fieldset><legend><img src="img/foot/quick.png" alt="Quick Contact" /></legend>
<form id="quickMail" method="post" action="quickMail.php">
<label for="email">Email:</label>
<input type="text" class="footText" name="email" />
<label for="subject">Subject:</label>
<input type="text" class="footText" name="subject" />
<label for="message">Message:</label>
<textarea rows="4" cols="25" name="message"></textarea><br />
<input type="checkbox" name="userCopy" value="userCopy" id="userCopy">Send me a copy</input><br>
<input type="submit" id="footSubmit" value=""></input>
</form>
</fieldset>
</div>
<div id="footLeft">
<img src="img/foot/footLogo.png" alt="" />
<br />
<a href="index.php">Home</a><br />
<a href="design.php">Design</a><br />
<a href="development.php">Development</a><br />
<a href="resume.php">Resume</a><br />
<a href="contact.php">Contact</a><br />
</div>
<div id="footBot">
<span id="btt"><span id="bttt">Back to top </span><a href="#" id="toTop"></a></span>
<span id="copy">Copyright © 2013 </span>•
<span id="botMid">All content on this site was made entirely by me.</span>•
<span id="resources">Resources: <a href="http://getbootstrap.com/" target="_blank">Bootstrap <a href="http://fancybox.net/" target="_blank">Fancybox</a></span>
</div>
</div>
</footer>
<script type="text/javascript">
$("#toTop").click(function () {
$("html, body").animate({scrollTop: 0}, 600);
return false;
});
$(document).ready(function() {
$(".fancybox").fancybox();
});
$(document).ready(function() {
$('.carousel').carousel({
interval: 5000
})
});
</script>
</body>
CSS：
body {
width: 100%;
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
}
#head100 {
height: 100%;
background-color: #9db2b1;
}
#head {
width: 1150px;
margin: auto;
padding-top: 15px;
background-color: #9db2b1;
}
img {
border:0px;
}
a {
border: none;
}
#nav100 {
width: 100%;
background-color: #fff;
border-top: 1px solid #8C9C9A;
}
#nav {
width: 1150px;
margin: auto;
height: 52px;
}
ul#menu{margin:0; padding:0; list-style:none; clear:both;}
#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:right;}
#menu li a{background:url('../img/menu-sprite.jpg') no-repeat; width:100%; height:100%; display:block;}
/* design Button */
#menu li.design{width:108px; height:52px;}
#menu li.design a{background-position: 0 0;}
#menu li.design a:hover{background-position: 0 -52px;}
/* development Button */
#menu li.development{width:177px; height:52px;}
#menu li.development a{background-position:-108px 0;}
#menu li.development a:hover{background-position:-108px -52px;}
/* resume Button */
#menu li.resume{width:102px; height:52px;}
#menu li.resume a{background-position:-285px 0;}
#menu li.resume a:hover{background-position:-285px -52px;}
/* Contact Button */
#menu li.contact{width:126px; height:52px;}
#menu li.contact a{background-position:-387px 0;}
#menu li.contact a:hover{background-position:-387px -52px;}
#body100 {
background-color: #485c5a;
padding-bottom: 20px;
}
#body {
width: 1150px;
min-height: 350px;
margin: auto;
padding-top: 25px;
color: #fff;
background-color: #485c5a;
}
#welcome {
margin-top: 15px;
margin-left: 188px;
text-align: center;
}
#welcomeunder {
text-align: center;
font-size: 22px;
line-height: 35px;
font-variant: small-caps;
}
#welcomeunder a {
text-decoration: none;
color: #fff;
font-weight: bold;
}
#welcomeunder a:hover {
color: #a31e39;
}
#smiley {
font-size: 30px;
}
#mainPic {
width: 1150px;
margin: auto;
height: 450px;
}
.carousel.carousel-fade .item {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
left: 0;
z-index: 1;
}
.carousel.carousel-fade .carousel-control {
z-index: 3;
}
.amBG {
height: 520px;
padding-top: 25px;
padding-bottom: 25px;
background-color: #bfcfcc;
border-top: 10px solid #fff;
color: #485c5a;
}
#amBG {
height: 390px;
}
#aboutMe {
width: 1150px;
margin: auto;
}
#aboHead {
margin-top: 20px;
}
#aboutMe p {
padding-top: 60px;
}
#me {
margin-top: 35px;
float: right;
}
#desSec {
margin-bottom: 150px;
}
#desSec p {
width: 250px;
text-align: right;
margin-left: 75px;
}
#temTitle {
margin-top: 20px;
}
#dar {
width: 575px;
margin-top: 117px;
float: right;
}
#darTitle {
margin-left: 190px;
}
#bita {
width: 575px;
margin-top: 55px;
}
.temLeft {
float: left;
}
.temPic img {
width: 225px;
height: 325px;
border: 5px solid #fff;
border-radius: 3px;
float: right;
}
#ps {
width: 1150px;
margin: auto;
margin-top: -25px;
}
#ps img {
margin-top: 40px;
margin-bottom: 30px;
}
#psPics {
margin-left: 30px;
}
#tlUL{position:relative;}
#tlUL li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#tlUL li, #tlUL a{height:264px;display:block;}
#blackNight{left:0px;width:140px;}
#blackNight{background:url('../img/ps/bnPreview.png') 0 0;}
#blackNight a:hover{background: url('../img/ps/bnPreview.png') -140px 0;}
#aDesign{left:155px;width:465px;}
#aDesign{background:url('../img/ps/niPreview.png') 0 0;}
#aDesign a:hover{background: url('../img/ps/niPreview.png') -465px 0;}
#blUL{position:relative;}
#blUL li{margin:0;padding:0;list-style:none;position:absolute;top:274px;}
#blUL li, #blUL a{height:96px;display:block;}
#blast{left:0;width:306px;}
#blast{background:url('../img/ps/blPreview.png') 0 0;}
#blast a:hover{background: url('../img/ps/blPreview.png') -306px 0;}
#spiderman{left:316px;width:306px;}
#spiderman{background:url('../img/ps/smPreview.png') 0 0;}
#spiderman a:hover{background: url('../img/ps/smPreview.png') -306px 0;}
#trUL{position:relative;}
#trUL li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#trUL li, #trUL a{height:138px;display:block;}
#church{left:632px;width:467px;}
#church{background:url('../img/ps/chPreview.png') 0 0;}
#church a:hover{background: url('../img/ps/chPreview.png') -467px 0;}
#brUL{position:relative;}
#brUL li{margin:0;padding:0;list-style:none;position:absolute;top:148px;}
#brUL li, #brUL a{height:222px;display:block;}
#heavenHell{left:632px;width:465px;}
#heavenHell{background:url('../img/ps/hhPreview.png') 0 0;}
#heavenHell a:hover{background: url('../img/ps/hhPreview.png') -465px 0;}
footer {
height: 320px;
width: 100%;
background-color: #621223;
font-size: 0.9em;
}
#btt {
float: right;
margin-top: -5px;
}
#bttt {
float: left;
padding-right: 5px;
}
#toTop {
display: block;
float: right;
width: 21px;
height: 21px;
background:url('../img/toTop.png') 0 0;
}
#toTop:hover {
background:url('../img/toTop.png') -21px 0;
}
#foot {
width: 1150px;
margin: auto;
padding-top: 10px;
color: #fff;
}
#footRight {
width: 365px;
float: right;
}
fieldset {
margin-top: 10px;
float: right;
border: none;
text-align: right;
width: 265px;
}
#userCopy {
font-variant: small-caps;
}
legend {
font-weight: bold;
padding-bottom: 10px;
}
textarea {
resize: none;
width: 177px;
display: inline-block;
padding: 5px;
margin-bottom: 5px;
background-color: #fff;
color: #000;
border: 1px solid #a31e39;
border-radius: 5px;
font-size: 11px;
}
textarea:focus {
outline: none;
}
.footText {
width: 177px;
display: inline-block;
vertical-align:middle;
padding: 5px;
margin-bottom: 10px;
background-color: #fff;
color: #000;
border: 1px solid #a31e39;
border-radius: 5px;
font-size: 11px;
}
input:focus {
outline: none;
}
label {
display: inline-block;
width: 65px;
text-align: right;
float: left;
clear: both;
padding-top: 5px;
padding-bottom: 5px;
color: #fff;
font-weight: bold;
}
#footRight ::-webkit-scrollbar {
width: 12px;
}
#footRight ::-webkit-scrollbar-track {
background-color: #000;
border-left: 1px solid #191919;
}
#footRight ::-webkit-scrollbar-thumb {
background-color: #ccc;
}
#footRight ::-webkit-scrollbar-thumb:hover {
background-color: #a2a1a1;
}
#footSubmit {
background-image: url('../img/foot/send.png');
background-position: 0 0;
background-repeat: no-repeat;
width: 80px;
height: 28px;
margin-top: 10px;
border: 0;
cursor: pointer;
}
#footSubmit:hover {
background-position: -80px 0;
}
#footBot {
width: 100%;
clear: both;
margin: auto;
font-size: 0.8em;
padding-top: 10px;
text-align: left;
border-top: 2px solid #fff;
}
#copy {
padding-right: 20px;
}
#botMid {
padding-right: 20px;
padding-left: 20px;
}
#resources {
padding-left: 20px;
margin-top: 1px;
}
#resources a {
text-decoration: none;
color: #fff;
padding-left: 10px;
target-name:new;
target-new: tab;
}
#resources a:hover {
color: #000;
}
#footLeft {
width: 365px;
float: left;
margin-bottom: 30px;
margin-top: 5px;
}
#footLeft img {
margin-bottom: -5px;
}
#footLeft a {
display: inline-block;
text-decoration: none;
color: #fff;
border-left: 2px solid #fff;
margin-top: 10px;
padding-left: 10px;
}
#footLeft a:hover {
color: #000;
border-left: 2px solid #000;
}
对于凌乱，第一次使用本网站感到抱歉。
所以是的，任何想法都会有所帮助..谢谢
答案 0 :(得分：0)
如果您将body的属性width: 100%更改为min-width: 1150px;，则无法获得该块。这是因为你的横幅比窗口宽度宽，导致它推出，但其他一切都能变得更薄。