Html 小窗口时右下角的白色块
当我将窗口的大小调整到小于1150px时，我在页面的右下角得到一个扩展的白色块。我想尽一切办法都试过了，却找不到任何有效的办法 以下是HTML：Html 小窗口时右下角的白色块,html,css,Html,Css,当我将窗口的大小调整到小于1150px时，我在页面的右下角得到一个扩展的白色块。我想尽一切办法都试过了，却找不到任何有效的办法 以下是HTML： <!doctype HTML> <html> <head> <title></title> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="shortcut ic
<!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>
所以是的，任何想法都会有帮助。。如果您将
bodywidth:100%minwidth:1150px，请感谢您将无法获得该块。这是因为您的横幅比窗口宽度宽，导致它向外推，但其他所有内容都会变薄。请提供指向您网站的链接，或创建一个JSFIDLE。谢谢。我在帖子中编辑了一个URL，使min-width:100%用于具有不同背景颜色的所有元素。然后将最大宽度：
设置为某个疯狂的数字。编辑：宽度，而不是高度，没有任何作用你想在bootstarp ie中创建此站点吗
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;
}