Container Div не расширяется и нижний колонтитул застрял

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

Происходит следующее: #main div расширяется за счет содержимого, а класс .display — нет. Всегда кажется, что он останавливается примерно за 100 пикселей до конца #main div, и по какой-то причине именно здесь застревает нижний колонтитул. Я попытался установить для высоты контейнера значение auto, 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;
}

html css positioning
person 109221793    schedule 05.08.2010    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых, это странно, вы уверены, что хотите, чтобы весь макет был позиционирован абсолютно?

.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/.

person vinhboy    schedule 05.08.2010
comment
Винбой прав, абсолютное позиционирование — это большое нет. очень редко вам приходится прибегать к абсолюту, но избегайте его как можно чаще. - person Nealv; 05.08.2010
comment
Я сам так думал, но кто-то упомянул об этом на форуме, и, похоже, до сих пор это работало для меня. Как видите, я пытался использовать относительное позиционирование, но для меня это просто не имеет значения, я не знаю, почему. Используя абсолютный или относительный результат, я получаю... mediviewit.com/footerproblem.png Нижний колонтитул всегда застревает примерно за 100 пикселей до конца #main. - person 109221793; 05.08.2010
comment
если вы используете jsfiddle.net/LepXg/3, вы также можете увидеть, что нижний колонтитул поднимается дальше, чем должно. - person 109221793; 05.08.2010