Question

描述：我有一个页面，带有容器（div.display）。我页面主要内容的div称为#main。很长一段时间，我一直努力让这个div自动扩展内容，并推倒页脚，有一天我得到它！但是，现在我已经进入了我的网站的下一个版本，我已经以某种方式打破了它。

正在发生的事情是，＃main div正在扩展内容，但.display类不是。在#main div结束之前似乎总是停止大约100px，并且出于某种原因，这是页脚被卡住的地方。我已经尝试将容器高度设置为auto，100％并且没有在css中设置height属性，但它仍然没有扩展。

这是代码，如果有人有任何想法，我会非常感激！的 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;
}

Answer 1

首先，这很奇怪，您确定要将整个布局放在绝对位置吗？

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

Container Div不扩展＆amp;页脚被困住了

1 个答案: