当我将窗口的大小调整为小于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;
}
麻烦您，第一次使用此网站。
所以，是的，任何想法都会有所帮助..谢谢
最佳答案
如果将body的属性width: 100%更改为min-width: 1150px;，则不会得到该块。这是因为横幅的宽度大于窗口的宽度，导致其被推出，但其他所有项都可以变薄。
关于html - 小窗时白块右下 Angular ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20137578/