Контейнер Div не расширяется & Footer Stuck

Описание: У меня есть страница с контейнером (div.display). Div для основного содержимого моей страницы называется #main. Долгое время я изо всех сил старался, чтобы этот div автоматически расширялся с контентом и толкал нижний колонтитул, когда-то я получил его! Однако теперь, когда я перешел на следующую версию своего веб-сайта, я как-то ее сломал.Контейнер Div не расширяется & Footer Stuck

Что происходит, #main div расширяется с контентом, однако класс .display не является. Кажется, что он останавливается примерно на 100 пикселей раньше, чем заканчивается #main div, и по какой-то причине именно здесь нижний колонтитул застревает. Я попытался установить высоту контейнера на авто, 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%; 
}

Для основного, рассмотрели ли вы использование поля вместо верхнего/левого позиционирования?

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

в действии: http://jsfiddle.net/LepXg/3/

источник

2010-08-05 18:13:34 vinhboy

vihnboy прав, positioniong абсолютное большая, нет, нет. очень немногие времена вам приходится прибегать к абсолютному, но избегать его как можно чаще. – Nealv

Я думал об этом сам, но кто-то упомянул об этом на форуме, и, похоже, это работало до меня до сих пор. Как вы можете видеть, я попытался использовать относительное позиционирование, но для меня это просто не имеет значения, я не уверен, почему. Используя либо абсолютный, либо относительный, это результат, который я получаю ... http://www.mediviewit.com/footerproblem.png Нижний колонтитул всегда застревает около 100 пикселей или около того до конца #main. – 109221793

, если вы используете http://jsfiddle.net/LepXg/3/ , вы также можете увидеть, что нижний колонтитул поднимается дальше, чем нужно. – 109221793

Контейнер Div не расширяется & Footer Stuck

ответ

Смежные вопросы