Question

我有一个包含三篇文章的容器，我试图根据内容将它们设置为自动调整大小。文章似乎正确自动调整尺寸，但随着文章变大，我的容器不会变大，而且我的页脚也会重叠我的容器，而不是将所有东西都推下来。我怎样才能让容器变得更大，因为里面的文章变得更大并推动其他所有内容？

HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Base Temp</title>
<link href="Layout.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onLoad="MM_preloadImages('media/HorButton2Hov.png','media/HorButton3Hov.png','media/HorButton4Hov.png','media/HorButton1Hov.png')">       

<div id="Container">
<div id="Header">
  <div id="HeaderName">Company Name/Slogan
  </div><!--END HeaderName-->

 <div id="Logo"></div><!--END Logo-->

 <div id="HorMenu">

  <div id="HorButtons">
    <div id="HorButton1"><a href="BUTTON1URL" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Button1','','media/HorButton1Hov.png',1)"><img src="media/HorButton1.png" alt="" width="170" height="33" id="Button1"></a> </div><!--END HorButton1-->
    <div id="HorButton2"><a href="BUTTON2URL" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Button2','','media/HorButton2Hov.png',1)"><img src="media/HorButton2.png" alt="" width="170" height="33" id="Button2"></a>
    </div><!--END HorButton2-->
    <div id="HorButton3"><a href="BUTTON3URL" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Button3','','media/HorButton3Hov.png',1)"><img src="media/HorButton3.png" alt="" width="170" height="33" id="Button3"></a>
    </div><!--END HorButton3-->
    <div id="HorButton4"><a href="BUTTON4URL" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Button4','','media/HorButton4Hov.png',1)"><img src="media/HorButton4.png" alt="" width="170" height="33" id="Button4"></a>
    </div><!--END HorButton4-->
  </div><!--END HorButtons"-->
  </div><!--END HorMenu-->

</div><!--///////END Header\\\\\\\\\-->

<div id="VerMenu"><img src="media/VerMenu.png"  alt=""/>
</div><!--END VerMenu"-->

<div id="VerRightMenu"><img src="media/VerMenu.png"  alt=""/>
</div><!--END VerMenuRight-->

<!--///////////START CONTENT\\\\\\\\\\\-->
<div id="Content">
<div id="LeadArticle"><h1>Heading 1</h1><h2>Heading 2</h2><p>Content here<br>
and more</p></div>
<div id="LeftArticle"><h1>Left Article</h1>
</div><!--END LeftArticle"-->
<div id="RightArticle"><h1>Right Article</h1><p>a;ldkjlak aldjf adfjl;k jflikhfkjah kldhf kjh gfkjls dfj ghkljsdfhg kjsf ghkjdf ghfur hklus hgklj klsfjgh kljsdf ghkjdsf ghkjsldf ghkjsd gfkjsdf gksdf ghkljsd ghfkjs gf</p>
</div><!--END RightArticle-->


</div><!--/////////END Content\\\\\\\\\\\-->

<div id="Footer">
<br><br><br>Designed By Jamie Horton
</div><!--END Footer-->
</div><!-- END CONTAINER -->


</body>
</html>

CSS：

@charset "utf-8";
#Container
{
    position: absolute;
    width: 1336px;
    min-height: 600px;
    background-color: #FFF9F9;
    z-index: 0;
    text-align: left;
    left: 0px;
    top: 0px;
}
#Header
{
    position: absolute;
    height: 180px;
    width: 1336px;
    z-index: 10;
    left: 0px;
    top: 0px;
    background-image: url(media/Header.png);
    background-repeat: no-repeat;
    background-size: 1336px 180px;
}
#Logo
{
    position: absolute;
    top: 0px;
    left: 156px;
    z-index: 10;
    height: 180px;
    width: 220px;
    background-image: url(media/Logo.png);
    background-size: 100% 100%;
}
#HeaderName
{
    position: absolute;
    top: 50px;
    left: 476px;
    height: 61px;
    z-index: 10;
    width: 704px;
    color: #000000;
    font-weight: bold;
    font-size: xx-large;
}
#HorMenu
{
    position: absolute;
    top: 140px;
    left: 376px;
    height: 40px;
    width: 804px;
    z-index: 10;
    background-image: url(media/HorMenu.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#HorButtons
{
    position: absolute;
    top: 3px;
    left: 47px;
    height: 33px;
    width: 757px;
    z-index: 10;
    max-width: 804px;
    max-height: 33px;
}
#HorButton1 
{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 33px;
    max-height: 33px;
    width: 170px;
    z-index: 10;
}
#HorButton2
{
    position: absolute;
    top: 0px;
    left: 180px;
    height: 33px;
    max-height: 33px;
    width: 170px;
    z-index: 10;
}
#HorButton3
{
    position: absolute;
    top: 0px;
    left: 360px;
    height: 33px;
    max-height: 33px;
    width: 170px;
    z-index: 10;
}
#HorButton4
{
    position: absolute;
    top: 0px;
    left: 540px;
    height: 33px;
    max-height: 33px;
    width: 170px;
    z-index: 10;
}
#VerMenu
{
    position: absolute;
    top: 180px;
    left: 156px;
    z-index: 20;
    overflow: hidden;
    max-width: 170px;
    min-height: 250px;
}
#VerRightMenu
{
    position: absolute;
    top: 180px;
    right: 156px;
    z-index: 20;
    overflow: hidden;
    max-width: 170px;
    min-height: 250px;
}
#Content
{
    position: absolute;
    top: 180px;
    left: 156px;
    min-height: 320px;
    width: 1024px;
    overflow: hidden;
    z-index: 30;
}
#LeadArticle
{
    background-color: #E9E6E6;
    position: relative;
    left: 170px;
    z-index:: 31;
    margin-top: 15px;
    font-size: x-large;
    top: 0px;
    color: #010101;
    min-height: 100px;
    overflow: hidden;
    margin-left: 15px;
    margin-right: 15px;
    max-width: 654px;
    text-align: left;
    line-height: 25px;
    width: 654px;
}
#LeftArticle
{
    background-color: #E9E6E6;
    position: relative;
    float: left;
    left: 170px;
    z-index:: 31;
    margin-top: 15px;
    font-size: x-large;
    color: #010101;
    overflow: hidden;
    margin-left: 15px;
    margin-right: 15px;
    max-width: 320px;
    text-align: left;
    line-height: 25px;
    margin-bottom: 15px;
    bottom: 0%;
    width: 320px;
}
#RightArticle
{
    background-color: #E9E6E6;
    position: relative;
    float: right;
    z-index:: 31;
    margin-top: 15px;
    font-size: x-large;
    color: #010101;
    min-height: 100px;
    overflow: hidden;
    margin-left: 15px;
    margin-right: 15px;
    max-width: 320px;
    text-align: left;
    line-height: 25px;
    margin-bottom: 15px;
    right: 170px;
    width: 320px;
}
#Footer {
    position: absolute;
    height: 100px;
    width: 1024px;
    z-index: 57;
    background-color: #2F2F2F;
    font-size: large;
    text-align: center;
    left: 156px;
    bottom: 0px;
}
h1 {
    font-size:xx-large;
}
h2 {
    font-size:x-large;
}
p {
    font-size:large;
}

Answer 1

你有很多绝对定位的方法。布置父母时，不计算具有绝对定位的块。为了使容器与其内容一起生长，内容不得绝对定位。

接下来，您的页脚将设置为粘贴在容器的底部。将padding-bottom: 100px（或可能更多）添加到容器中以保留页脚的空间。

很多清理过的小提琴，但我相信它是关于你想要达到的目的： http://jsfiddle.net/R939B/

Answer 2

不要给他们一个特定的身高......让内容决定身高

Answer 3

您使用固定宽度作为文章div，这就是为什么div宽度不会随着内容的增加而增加。

对于页脚放置，在前一个兄弟div上放置一个相同高度的页脚margin-bottom。同时将页脚的position更改为fixed。在这种情况下 -

#Content {
    margin-bottom: 100px;
}

#Footer {
    position: fixed;
}

Div不适应内容

3 个答案: