100％高さラッパー、フロートチャイルドで壊れます

私はここで何が起こっているのか分かりません。私は見つけることができたすべての単一の修正を試しましたが、何もできませんでした。100％高さラッパー、フロートチャイルドで壊れます

パットクリアは機能しません。オーバーフローすることはありません：私はラッパーの外にナビゲーションを配置しているためです。ここで間違っているものの例です：

以下

は、コードは本当にここにいくつかの助けを使用することができ、あります。

@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>

出典

2011-01-30 Dave Siegel

複数の「子供」は「子供」である。（私はあなたのためにあなたのタイトルを固定しました） –

まだまだ助けにはなりませんが、> _> –

私はあなたの問題を理解しています。それは#wrapperの白い背景がページの下部に来ていないということですか？

はその場合：

だけ#wrapperの終了タグの前に、追加します<br style="clear: both" />。
#forumStatsから、height: 50pxを削除し、overflow: autoを追加してください。

これはFirefoxで修正されています。

出典

2011-01-30 17:14:15 thirtydot

私はそれが見えないとは信じられません。どうもありがとう。私はあまりにも小さい高さを追加した図。 –

100％高さラッパー、フロートチャイルドで壊れます

答えて

関連する問題