Container Div擴展＆Footer Stuck

描述：我有一個頁面，帶有一個容器（div.display）。我的頁面主要內容的div被稱爲#main。很長一段時間，我努力讓這個div隨內容自動擴展，並將頁腳向下推，有一天我得到了它！但是，現在我已經進入了我的網站的下一個版本，我已經以某種方式打破了它。Container Div擴展＆Footer Stuck

發生了什麼事情，#main div隨內容擴展，但.display類不是。在#main div結束之前它總是停止大約100px，由於某種原因，這是頁腳卡住的地方。我已經嘗試將容器高度設置爲自動，100％，並沒有在CSS中設置高度屬性，但它仍然不能展開。

這裏是代碼，如果有人有任何想法，我會很感激！ HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Home</title> 

</head> 

<body> 
<div class="display"> 
<div id="header"> 
<div id="logo"> 
... 
</div> 
<div id="navigation"> 
<ul class="glossymenu"> 
<li class="current">...<b>Home</b></a></li> 
<li>...</li> 
<li>...</li> 
<li>...</li> 
<li>...</li> 
<li>...</li> 
<li>...</li> 
</ul> 
</div> 
<div id="login" align="center"> 
... 
</div> 
</div> <!--END OF HEADER--> 



<div id="main"> 


<div id="intro" align="center"> 
... 
</div> 

<div id="interested"> 
<div id="quote1"> 
... 
</div> 

<div id="buttons"> 
... 
</div> 

</div> 

<div id="homeFeatures"> 
... 
</div> 

<div id="homePricing"> 
... 
</div> 


</div> 
<!--End of Main--> 


<div id="footer"> 

<div class="footerContent"> 
<div id="contactUs" class="footerClass"> 
... 
</div> 

<div id="community" class="footerClass"> 
... 
</div> 

<div id="sitemap" class="footerClass"> 
... 
</div> 
<div id="navWrap"> 
<div id="clientScroll"> 
<div id="scroller"> 
</div> 
</div> 
</div> 
</div><!--END OF FOOTERCONTENT--> 


</div> 
<!--END OF FOOTER DIV--> 


</div><!--END OF DISPLAY DIV--> 


</body> 
</html>

這裏是CSS：

@charset "utf-8"; 
/* CSS Document */ 

html, body{height:100%;} 
html,body {margin:0;padding:0} 


body,td,th { 
font-family: Verdana, Geneva, sans-serif; 
font-size: 14px; 
color: #000; 
} 
body { 
background-color: #FFF; 
} 

a { 
font-size: 14px; 
color: #333399; 
} 
a:link { 
text-decoration: none; 
} 
a:visited { 
text-decoration: none; 
color: bfce24; 
} 
a:hover { 
text-decoration: underline; 
} 
a:active { 
text-decoration: none; 
} 
h1 { 
font-family: Georgia; 
font-size: 40px; 
color: #000; 
} 
h2 { 
font-family: Georgia; 
font-size: 30px; 
color: #000; 
} 
h3 { 
font-family: Georgia; 
font-size: 20px; 
color: #000; 
} 

.header 
{ 
background-repeat: no-repeat; 
background-color: #f7f7f7; 
height: 100px; 
width: 100%; 

} 

.display { 
/*position: relative; 
margin-left: auto; 
margin-right: auto; 
width: 100%; 
top: 0px; */ 
position: absolute; 
left: 0%; 
width: 100%; 
} 

#logo 
{ 
position: absolute; 
top: 20px; 
left: 100px; 
} 

#navigation 
{ 
position:relative; 
top:90px; 
} 

#main 
{ 
position:relative; 
top: 100px; 
left: 100px; 
width: 1000px; 
} 

#footer 
{ 
background-color: #5956a9; 
background-repeat:no-repeat; 
position: relative; 
height:250px; 
width: 100%; 
} 

.footerClass 
{ 
font-size:14px; 
color:#FFF; 
} 


.footerClass a 
{ 
font-size: 14px; 
color: #FFF; 
} 


.footerClass a:hover 
{ 
text-decoration: underline; 
font-size: 14px; 
color: #bfce24; 
} 


.footerClass a:visited 
{ 
font-size: 14px; 
color: #bfce24; 
} 

.footerClass h1 
{ 
color:#fff; 
font-size:24px; 
} 

#contactUs 
{ 
position:absolute; 
left: 10px; 
} 


#community 
{ 
position:absolute; 
left: 800px; 
} 

#sitemap 
{ 
position:absolute; 
top: 170px; 
left: 320px; 
} 

#login 
{ 
position: absolute; 
top: 18px; 
left: 1000px; 
} 

#mainFeatures 
{ 
position: relative; 
top: 35px; 
height:auto; 
} 

#intro 
{ 
position: relative; 
height:auto; 
} 

#interested 
{ 
position: relative; 
width: 1000px; 
padding-top: 10px; 
} 
#quote1 
{ 
position: relative; 
float: left; 
} 

#buttons 
{ 
position: relative; 
float: right; 
} 

#homeFeatures 
{ 
position: relative; 
top: 20px; 
} 

#homePricing 
{ 
position: relative; 
padding-top: 20px; 
}

來源

2010-08-05 109221793

首先，這是奇怪的，你確定你想你的整個佈局中定位絕對？

.display { 
/*position: relative; 
margin-left: auto; 
margin-right: auto; 
width: 100%; 
top: 0px; */ 
position: absolute; 
left: 0%; 
width: 100%; 
}

對於主體，您是否考慮過使用margin而不是top/left定位？

#main 
{ 
margin-top: 100px; 
margin-left: 100px; 
width: 1000px; 
}

看到它在行動：http://jsfiddle.net/LepXg/3/

來源

2010-08-05 18:13:34 vinhboy

vihnboy是正確的，positioniong絕對是一個很大的不，不。很少有時候你不得不求助於絕對，但儘可能地避免它。 – Nealv 2010-08-05 18:16:43

我自己也這麼想過，但有人在論壇上提到過它，直到現在它似乎對我都有用。正如你可以看到我已經嘗試使用相對定位，但對我來說，它只是沒有區別，我不知道爲什麼。使用絕對或相對這是我得到的結果... http://www.mediviewit.com/footerproblem.png 在#main結束之前，頁腳始終卡住大約100px左右。 – 109221793 2010-08-05 18:43:38

如果您使用http://jsfiddle.net/LepXg/3/ 您還可以看到頁腳出現比它應該進一步。 – 109221793 2010-08-05 18:57:52

Container Div擴展＆Footer Stuck

回答

相關問題