我已经尝试了所有我能想到的东西,但似乎没有什么可以解决这个问题.当我以全屏(在我的计算机上)查看网站时,它显得很好,但是当我将浏览器调整到较小的窗口时,所有网站内容右侧都会出现一个非常奇怪的空白区域.由于某些元素设置为100％宽度,我似乎无法弄清楚为什么这个空白区域会覆盖这些元素.
HTML：
<body>
<div id="bar">
<div id="linkarea">
<ul>
<li><a href="index.PHP">Home</a></li>
<li><a href="register.PHP">Register</a></li>
<li><a href="explore.PHP">Explore</a></li>
<li><a href="newtopic.PHP">New Debate</a></li>
<li><a href="contact.PHP">Contact</a></li>
</div>
</div><div id="sky">
<div id="cloud"></div>
<div id="cloud2"></div>
<div id="cloud3"></div>
<div id="cloud4"></div>
<div id="cloud5"></div>
<div id="cloud6"></div>
<div id="cloud7"></div>
<div id="cloud8"></div>
</div>
<div id="contenttop"></div><div id="container">
<img src="images/cloud0.png" id="cloud0" alt="TelUsY" />
<img src="images/logo1.png" id="logo" />
<img src="images/plane.png" id="plane" alt="TelUsY" />
<div id="userinfob">
<span id="logintext">
<form name="loginform" id="loginform" method="POST" action="/beta/index.PHP">
<input type="text" class="styled_login" name="access_login" id="loginface" value="username...">
<input type="password" class="styled_login" name="access_password" id="pwface">
<a class="button" id="loginbutton" href="#"><span>Login!</span></a></span>
</form>
<br>
<a href="password_recovery.PHP" class=>Forgot your password?</a>
</div>
<div id="content">
<div id="container_top">
<!-- Include Top Container Content -->
<center>
<form action="search.PHP" method="get" id="thesearch">
<table id="search" cellpadding=0 cellspacing=5 border=0>
<tr>
<td class="searchbar">
<!-- Search Box -->
<input type="text" name="query" size="20" value="Search..." class="search_field_out" id="searchbg" onFocus="changeOnFocus();" onBlur="changeOnBlur();">
</td>
<td class="searchbar" align="left">
<!-- Submit Button -->
<input type="image" src="images/search_icon2.gif" name="submit_search" id="submitbutton" onMouSEOver="hoverButton();" onMouSEOut="outButton();">
</td>
</tr>
</td>
</tr>
</table>
</form>
</center> </div>
<div id="leftcontent">
<a href="register.PHP"><img class="imgleft" src="images/1reg.png" /></a>
<div class="txtright">Registration is simple,and takes less than 5 minutes. Without an account,you will be able to view current debate topics,however you won't be able to share your opinion. <a href="register.PHP">Click here to sign up</a>,and begin using all the features of the TelUsY service now. </div>
<a href="explore.PHP"><img class="imgleft" src="images/2explore.png" /></a>
<div class="txtright">Once you have an account,you can begin browsing through current debates by choosing a category,or searching for a more specific word or phrase with the search bar. You can also find recent popular topics on the Explore page.</div>
<a href="newtopic.PHP"><img class="imgleft" src="images/3debate.png" /></a>
<div class="txtright">Once you've found a topic that you find interesting,feel free to post your opinion by clicking on either the red or green Box. If you agree or disagree with an opinion,but don't want to post a counter-argument simply click on either the red or green icon to cast your vote on that topic.</div>
</div>
<div id="rightcontent">
<h2>Popular Debates</h2>
<ol>
<a href="view.PHP?topic=zIG1294266765NV"><li>Arsenal should have defeated Mancheste...</li></a>
<a href="view.PHP?topic=iRr1294268603PF"><li>The Ricky Gervais show is absolutely h...</li></a>
<a href="view.PHP?topic=hed1294268314uo"><li>Starcraft 2 is one of the best online ...</li></a>
<a href="view.PHP?topic=eGX1294268407ow"><li>President Barack Obama should be doing...</li></a>
<a href="view.PHP?topic=vLA1294268494sG"><li>Macaroni Grill is one of the best Ital...</li></a>
</ol>
<h2>Recent Debates</h2>
<ol>
<a href="view.PHP?topic="><li>dsnfkldsj fklsdf j sdlkfjdsfklj sdfkld...</li></a>
<a href="view.PHP?topic="><li>The Miami heat shouldn't be hated on f...</li></a>
<a href="view.PHP?topic="><li>More Americans should limit their fast...</li></a>
<a href="view.PHP?topic="><li>The Ricky Gervais show is absolutely h...</li></a>
<a href="view.PHP?topic="><li>Macaroni Grill is one of the best Ital...</li></a>
</ol>
<h2>Categories</h2>
<ul>
<a href="search.PHP?category=1"><li>Sports</li></a>
<a href="search.PHP?category=2"><li>Food</li></a>
<a href="search.PHP?category=3"><li>Games</li></a>
<a href="search.PHP?category=4"><li>Business</li></a>
<a href="search.PHP?category=5"><li>Politics</li></a>
<a href="search.PHP?category=6"><li>Technology</li></a>
<a href="search.PHP?category=7"><li>Television</li></a>
<a href="search.PHP?category=8"><li>Music</li></a>
<a href="search.PHP?category=9"><li>Health</li></a>
<a href="search.PHP?category=10"><li>Home & Garden</li></a>
</ul> </div> <div id="footer"><div id="footerarea">
Copyright 2010 TelUsY. All rights reserved.<br />
<a href="index.PHP">Home</a> |
<a href="register.PHP">Register</a> |
<a href="explore">Explore</a> |
<a href="newtopic.PHP">New Debate</a> |
<a href="contact.PHP">Contact</a>
</div></div> </div>
</div>
<div id="bad_login" title="Login Unsuccessful" class="dialog" style="display:none"><center>
The username and password you entered did not match our records.<br><a href="#" onclick="closeME('bad_login');">Close this Box and try again</a>.
<br><br>
If you don't have an account yet,register today! It's fast,easy,and free.<br>
<a href="register.PHP">Create an account now!</a>
</div></body>
CSS：
@charset "utf-8";
/* CSS Document */
@font-face {
font-family: 'CoolveticaRegular';
src: url('../fonts/coolvetica_rg_0-webfont.eot');
src: local('☺'),url('../fonts/coolvetica_rg_0-webfont.woff') format('woff'),url('../fonts/coolvetica_rg_0-webfont.ttf') format('truetype'),url('../fonts/coolvetica_rg_0-webfont.svg#webfonthn4Mp3Kg') format('svg');
font-weight: normal;
font-style: normal;
}
html,body,div,h1,h2,h3,ul,ol,li,form,fieldset,input,textarea {margin: 0; padding: 0; font-size: 100%;}
img {border:none;}
a {border:none;}
html {width:100%;}
body {background-color:#FFF; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; font-size:12px; width:100%;}
#container {width:1024px; margin:0pt auto; text-align:center; position:relative; clear:both; z-index:10;}
#logo {position:absolute; z-index:10; top:20px; left:35px;}
#userinfoa {width:270px; height:45px; position:absolute; top:40px; right:20px; z-index:10; color:#FFF; line-height:20px;}
#userinfoa a {border:none; color:#FFF;}
#userinfoa a:hover {border:none; text-decoration:none; color:#CCC;}
#userinfoa a:active {border:none; color:#FFF;}
#userinfob {width:270px; height:45px; position:absolute; top:40px; right:20px; z-index:10; color:#FFF; line-height:15px;}
#userinfob a {border:none; color:#FFF;}
#userinfob a:hover {border:none; text-decoration:none; color:#CCC;}
#userinfob a:active {border:none; color:#FFF;}
#bar {height:42px; width:100%; background-image:url(../images/bar.png); background-repeat:repeat-x; z-index:2; overflow:visible; min-width:100%;}
#sky {height:312px; width:100%; position:absolute; background-color:#5ba2ca; z-index:1; clear:both; overflow:visible; min-width:100%;}
#contenttop {height:166px; width:100%; position:absolute; top:271px; background-image:url(../images/cloudt.png); background-position:top left; background-repeat:repeat-x; z-index:2; overflow:hidden;}
#cloud0 {position:absolute; left:0px; top:0px; z-index:5;}
#cloud {position:absolute; top:110px; left:0%; z-index:2; width:159px; height:113px; background-image:url(../images/cloud1.png); background-repeat:no-repeat;}
#cloud2 {position:absolute; top:170px; left:15%; z-index:1; width:44px; height:45px; background-image:url(../images/cloud2.png); background-repeat:no-repeat;}
#cloud3 {position:absolute; top:100px; left:30%; z-index:3; width:77px; height:60px; background-image:url(../images/cloud3.png); background-repeat:no-repeat;}
#cloud4 {position:absolute; top:50px; left:45%; z-index:4; width:138px; height:97px; background-image:url(../images/cloud4.png); background-repeat:no-repeat;}
#cloud5 {position:absolute; top:20px; left:60%; z-index:2; width:159px; height:113px; background-image:url(../images/cloud1.png); background-repeat:no-repeat;}
#cloud6 {position:absolute; top:70px; left:90%; z-index:1; width:44px; height:45px; background-image:url(../images/cloud2.png); background-repeat:no-repeat;}
#cloud7 {position:absolute; top:130px; left:75%; z-index:3; width:77px; height:60px; background-image:url(../images/cloud3.png); background-repeat:no-repeat;}
#cloud8 {position:absolute; top:115px; left:85%; z-index:4; width:138px; height:97px; background-image:url(../images/cloud4.png); background-repeat:no-repeat;}
#content {position:absolute; top:325px; left:0px; background-color:#FFF; clear:both; width:100%; padding:20px 20px 0 20px; z-index:100;}
#mainnode {position:relative; width:578px; height:168px; background-color:#e7f5fe; border:1px solid #2979a5; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; text-align:center; margin:0 auto; clear:both;}
#maincontent {position:absolute; width:538px; left:20px; top:35px; height:110px; font-size:14px; text-align:left; color:#04436a; overflow:auto;}
#parentnode {position:relative; text-decoration:none; width:350px; height:125px; background-color:#e7f5fe; color:#04436a; border:1px solid #2979a5; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; text-align:center; margin:0 auto; clear:both; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=33)"; filter: alpha(opacity=33); opacity:.33;}
.nodecontent {position:absolute; width:310px; left:20px; top:35px; height:80px; font-size:14px; text-align:left; overflow:hidden;}
#childnodel {position:relative; width:350px; height:125px; background-color:#b6df8e; color:#3b781d; border:1px solid #25520f; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; text-align:center; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=33)"; filter: alpha(opacity=33); opacity:.33;}
#childnoder {position:relative; width:350px; height:125px; background-color:#f08d97; color:#902217; border:1px solid #521711; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; text-align:center; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=33)"; filter: alpha(opacity=33); opacity:.33;}
#agreebtn {position:absolute; bottom:-27px; left:-27px;}
#disagreebtn {position:absolute; bottom:-27px; right:-27px;}
#percents {width:100%; position: absolute; bottom:2px; color:#04436a; text-align:center; margin:0 auto; font-size:16px;}
.red {color:#a61c28;}
.green {color:#72b332;}
#postinfomain {width:538px; position: absolute; left:20px; top:5px; color:#04436a; text-align:center; margin:0 auto; font-size:14px; }
#postinfomain hr {border:0px solid #04436a; height:1px; background-color:#04436a;}
.postinfo {width:310px; position: absolute; left:20px; top:5px; text-align:center; margin:0 auto; font-size:14px; }
#parentnode hr {border:0px solid #04436a; height:1px; background-color:#04436a}
#parentnode a {text-decoration:none; color:#04436a;}
#childnodel hr {border:0px solid #04436a; height:1px; background-color:#3b781d;}
#childnodel a {color:#3b781d; text-decoration:none;}
#childnoder a {color:#902217; text-decoration:none;}
#childnoder hr {border:0px solid #04436a; height:1px; background-color:#902217;}
.rightpost {float:right; font-style:italic;}
.rightpost_votes {float:right; font-weight:bold; padding-right:25px; color:red;}
.leftpost {float:left; font-weight:bold; }
.leftpost_votes {float:left; font-weight:bold; padding-left:25px; color:green;}
#plane {position:absolute; top:35px; right:0px; z-index:3;}
#linkarea {height:40px; width:100%; margin:0 auto; min-width:1024px; position:relative; float:left;}
#linkarea a {font-family:CoolveticaRegular,Georgia,serif; color:#FFF; font-size:18px; text-decoration:none;}
#linkarea a:hover {font-family:CoolveticaRegular,serif; color:#FC3;}
#linkarea a:active {font-family:CoolveticaRegular,serif; color:#FFF;}
#linkarea ul {list-style-type:none; text-align:center; padding-top:14px; text-align:center; float:left; position:relative; left:50%;}
#linkarea ul li {float:left; display:block; right:50%; position:relative; padding:0 60px 0 60px;}
#footer {height:100px; width:1024px; margin:0 auto; background-image:url(../images/footer.png); color:#FFF; clear:both; text-align:center;}
#footer a {color:#FFF;}
#footerarea {padding-top:40px;}
#leftcontent {width:593px; padding:20px 0 20px 20px; float:left; text-align:left; font-family: "Lucida Grande",sans-serif; color:#000; font-size:14px; text-decoration:none; line-height:18px;}
#rightcontent ul li {margin-left:35px; line-height:18px; margin-bottom:10px;}
#rightcontent ol li {margin-left:35px; line-height:18px; margin-bottom:10px;}
#rightcontent a:hover {color:#999;}
#rightcontent a {color:#04436a;}
#leftcontent a:hover {color:#999;}
#leftcontent a {color:#04436a;}
#rightcontent {width:371px; padding:20px; float:right; text-align:left; font-family: "Lucida Grande",sans-serif; color:#000; font-size:14px; text-decoration:none; line-height:18px;}
#rightcontent h2 {font-family: "Lucida Grande",sans-serif; color:#04436a; font-size:24px; line-height:18px; padding-bottom:15px; padding-top:15px;}
#searchbg {width:300px; height:48px; display:block; border: 0;}
.imgleft {float:left; clear:both; width:212px; height:190px;}
.txtright {float:left; padding:12px 0 20px 20px; width:356px; font-size:18px; height:190px;}
.txtright a {color:#999; text-decoration:none;}
.txtright a:hover {color:#ccc;}
a.button {margin-top:3px; margin-left:2px; background: transparent url('../images/button_a.png') no-repeat scroll top right; color: #FFF; display: block; float: left; font: normal 14px Georgia,serif; height: 25px;
padding-right: 5px; /* sliding doors padding */ text-decoration: none;}
a.button span {color: #FFF; background: transparent url('../images/button.png') no-repeat; display: block; line-height: 16px; padding: 0 5px 5px 9px;}
.pusher {padding-bottom:105px;}
网站：link text
我知道定位可能是非常规的,并且一些样式尚未使用,我仍在处理未使用的代码.但是对于我的生活,我无法想象这一点.屏幕截图如下：
！[替代文字] [2]
！[替代文字] [3]
