个人中心
gpt4 book ai didi

html - Div 不适应内容

转载 作者：太空宇宙 更新时间：2023-11-04 13:06:19 25 4
gpt4 key购买 nike

我有一个包含三篇文章的容器，我试图让它们根据内容自动调整大小。文章似乎可以正确调整大小，但是我的容器并没有随着文章变大而变大，而且我的页脚与我的容器重叠，而不是将所有内容都向下推。我怎样才能让容器随着里面的元素变大而变大并将其他所有东西压低？

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;
}

最佳答案

你有很多绝对定位的方法。绝对定位的 block 在布局其 parent 时不计算在内。为了使容器随内容一起增长，内容不能绝对定位。

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

很多清理 fiddle ，但我相信这是关于你想要达到的目的: http://jsfiddle.net/R939B/

关于html - Div 不适应内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25109737/

25 4 0
文章推荐： html - ionic 选项按钮中的按钮，但我希​​望它垂直对齐
文章推荐： c++ - 新旧状态的区别
文章推荐： javascript - 使用 Meteor 创建提交按钮
文章推荐： c++ - 使用 ofstream 创建一个位图文件有一个奇怪的输出
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com