100％高度包装，与漂浮儿童打破

时间：2011-01-30 17:03:42

标签： html css

我不知道这里发生了什么。我已经尝试过我能找到的每一个在线修复，并且无法正常工作。

放置清除不会工作，我不能用户溢出：auto因为我将导航定位在包装器之外。以下是错误的例子：

http://plustg.com/v2/

下面是代码，可以在这里使用一些帮助。

@CHARSET "ISO-8859-1";
* {margin:0;padding:0;} 
html, body
{
 background-color: #dcdcdc;
 padding: 0px;
 margin: 0px;
 height: 100%;
 font-family: Tahoma, Arial;
}

#wrapper
{
 border-top: 1px white solid;
 width: 1100px;
 min-height: 100%;
 margin: auto;
 background-color: #fff;

}

#headerBlue
{
 width: 1086px;
 height: 110px;
 margin: auto;
 margin-top: 7px;
 background-image: url('http://plustg.com/v2/_img/blue/header.png');
 background-repeat: no-repeat;
}

#headerPink
{
 width: 1086px;
 height: 110px;
 margin: auto;
 margin-top: 7px;
 background-image: url('http://plustg.com/v2/_img/pink/header.png');
 background-repeat: no-repeat;
}

#userStuff
{
 float: left;
 width: 216px;
 height: 88px;
 margin-top: 10px;
 margin-left: 350px;
 padding: 5px;
}

#userStuff img
{
 float: left;
}

#welcomeMessage
{
 float: left;
 font-size: 11px;
 color: #fff;
 display: block;
 margin-left: 10px;
 margin-top: 5px;
}

#notificationBar
{
 float: left;
 display: block;
 width: 129px;
 height: 23px;
 font-size: 11px;
 color: #fff;
 background-image: url('http://plustg.com/v2/_img/notification.png');
 background-repeat: no-repeat;
 margin-top: 10px;
 margin-left: 10px;
 padding-left: 5px;
 padding-top: 3px;
}

#logo
{
 width: 115px;
 height: 39px;
 float: right;
 margin-top: 20px;
 margin-right: 40px;
}

#leftBar
{
 margin-top: 10px;
 width: 160px;
 float: left;
}

#navMain
{
 width: 140px;
}

#mainBlue
{
 width: 150px;
 height: 37px;
 background-image: url('http://plustg.com/v2/_img/blue/navMain.png');
 background-repeat: no-repeat;
 font-size: 12px;
 color: #fff;
 margin-left: -11px;
}

#mainPink
{
 width: 150px;
 height: 37px;
 background-image: url('http://plustg.com/v2/_img/pink/navMain.png');
 background-repeat: no-repeat;
 font-size: 12px;
 color: #fff;
 margin-left: -11px;
}

span.mainTitle
{
 display: block;
 float: left;
 margin-left: 22px;
 margin-top: 4px;
}

#navMain ul, #navMain li
{
 list-style: none;
 padding: 0;
 margin: 0;
}

#navMain ul
{
 padding-left: 10px;
 margin-top: -5px;
}

#navMain li
{
 font-size: 14px;
 color: #1385a9;
 padding-top: 3px;
 border-bottom: 1px dotted #1385a9;
}

#navMain a
{
 font-size: 13px;
 color: #424141;
 text-decoration: none;
}

#content
{
 width: 660px;
 height: auto;
 float: left;
 margin-top: 25px;
 margin-left: 20px; 
}

#newsLatest
{
 width: 654px;
 height: 157px;
 background-image: url('http://plustg.com/v2/_img/newsbg.png');
 background-repeat: no-repeat;
}

img.newsImg
{
 float: left;
}

.titleBit
{
 float: left;
 margin-left: 10px;
 margin-top: 10px;
 font-size: 12px;
 color: #535455;
 width: 400px;
}

.newsCat
{
 color: #e96125;
}

.byBit
{
 float: left;
 margin-left: 16px;
 font-size: 11px;
 color: #8d8e8f;
}

a.author
{
 color: #2e821a;
}

span.comments
{
 background-image: url('http://plustg.com/v2/_img/balloon-left.png');
 background-repeat: no-repeat;;
 padding-left: 20px;
}

span.comments a
{
 color: #000;
}

.newsBit
{
 float: left;
 width: 390px;
 height: 70px;
 font-size: 11px;
 color: #535455;
 margin-left: 16px;
 margin-top: 13px;
}

.buttonBit
{
 float: left;
 width: 400px;
 margin-left: 16px;
 margin-top: 10px;
}

.newsMore
{
 color: #fff;
 display: block;
 font-size: 11px;
 background-image: url('http://plustg.com/v2/_img/newsButton.png');
 background-repeat: no-repeat;
 width: 112px;
 height: 20px;
 padding-top: 3px;
 padding-left: 10px;
 float: right;
}

.newsMore a
{
 color: #fff;
 text-decoration: none;
}

#tmLatest
{
 width: 660px;
 margin: auto;
 margin-top: 15px;
}

#tmLatest img
{
 width: 655px;
 margin: auto;
 cursor: pointer;
}

.switchLatest
{
 height: 25px;
 font-size: 12px;
 color: #e97a49;
 padding-right: 5px;
}

.switchLatest a
{
 display: block;
 float: right;
 text-align: center;
 width: 17px;
 height: 17px;
 border: 1px solid #e97a49;
 margin-top: 3px;
 margin-left: 5px;
 color: #e97a49;
 text-decoration: none;
}

.switchLatest a:hover
{
 background-color: #e97a49;
 color: #fff;
}

#forumStats
{
 width: 388px;
 float: left;
 height: 50px;
}

.forumBar
{
 height: 23px;
 background-image: url('http://plustg.com/v2/_img/barGreen.png');
 background-repeat: no-repeat;
 font-size: 12px;
 color: #fff;
 padding-left: 10px;
 padding-top: 3px;
}

#selfyLatest
{
 width: 248px;
 float: right;
 height: 50px;
}

.selfyBar
{
 height: 23px;
 background-image: url('http://plustg.com/v2/_img/barRed.png');
 background-repeat: no-repeat;
 font-size: 12px;
 color: #fff;
 padding-left: 10px;
 padding-top: 3px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>PlusTG Design v2</title>
<link href="_inc/_css/v1.css" title="compact" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
 <div id="headerBlue">
  <div id="userStuff">
   <img src="http://plustg.com/v2/_img/defaultAvatar.png" alt="defaultAvatar" />
   <span id="welcomeMessage">Welcome <strong>Collussus</strong></span>
   <span id="notificationBar"><strong>1</strong> new notification</span>
  </div>
  <div id="logo"><img src="http://plustg.com/v2/_img/logo.png" alt="Logo" /></div>
 </div>
 <div id="leftBar">
  <div id="navMain">
   <div id="mainBlue">
    <span class="mainTitle"><strong>Main Menu</strong></span>
   </div>
   <ul class="blue">
    <li>&raquo; <a href="#">Home</a></li>
    <li>&raquo; <a href="#">Selfy Maker</a></li>
    <li>&raquo; <a href="#">Profiles</a></li>
    <li>&raquo; <a href="#">Bookmarklets</a></li>
    <li>&raquo; <a href="#">Advertise Us</a></li>
    <li>&raquo; <a href="#">Contact</a></li>
   </ul>
  </div>

 </div>

 <div id="content">
  <div id="newsLatest">
   <img src="http://plustg.com/v2/_img/newsTestImg.png" alt="test" class="newsImg" />
   <div class="titleBit">&#147;<strong>[01/29/2011]</strong> <span class="newsCat">Maintenance</span>: And we're back!&#148;</div>
   <div class="byBit">By <a href="#" class="author">Collussus</a> <span class="comments"><a href="#">51</a></span></div>
   <div class="newsBit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec ante sapien, eget convallis ligula. Ut consectetur risus ac purus ullamcorper non varius enim pulvinar. Etiam tristique urna sed mauris porttitor iaculis. Phasellus dui nisi, vehicula id laoreet ut, tristique in dui. In et euismod massa. Morbi pharetra sagittis dui. </div>
   <div class="buttonBit"><span class="newsMore"><a href="#">Read More &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &raquo;</a></span></div>
  </div>
  <div id="tmLatest">
   <img src="http://img.tinierme.com/shop_gacha/gacha/2011/01/img/20110128_time/110128_time_title.jpg" alt="Gears of Time" />
   <div class="switchLatest"><a href="#">5</a><a href="#">4</a><a href="#">3</a><a href="#">2</a><a href="#">1</a></div>
  </div>

  <div id="forumStats">
   <div class="forumBar"><strong>Latest Forum Activity</strong></div>
   <div class="forumContent">
    <div class="onePost">
     <img src="http://plustg.com/v2/_img/defaultAvatarS.png" />
     tests
    </div>

   </div>
  </div>
  <div id="selfyLatest">
   <div class="selfyBar"><strong>Latest Saved Selfy</strong></div>
   <div class="selfyContent">stuff here<br />test</div>
  </div>

 </div>
</div>

</body>
</html>

1 个答案:

答案 0 :(得分：5)

我不是100％肯定我理解你的问题。问题#wrapper上的白色背景是不是落在页面底部？

如果是这样的话：

  • 在#wrapper的结束标记之前，添加：<br style="clear: both" />。
  • 从#forumStats开始，移除height: 50px并添加overflow: auto。

这可以在Firefox中修复它。

相关问题
最新问题