Question

在下面的代码中，div内容容器的高度不会随着其内部div的高度的增加而扩展。我希望随着内部div的高度的增加使其高度自动增加

这是我的css代码

body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    background:#f7f7f7;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
    width: 1000px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
}

#topsection{
    background: #f0f0f0;
    height: 90px; /*Height of top section*/
}

#topsection h1{
    margin: 0;
    padding-top: 15px;
}

#content-container{
    float:left;
    width:100%;
    background:#f8f8f8;
    border:1px solid #f0f0f0;
    margin-top:-22px;
    margin-left:-1px;
    height:auto;
}

#contentwrapper{
    float: left;
    width: 100%;    
}

#contentcolumn{
    margin-right: 310px; /*Set right margin to RightColumnWidth*/
    background:none;
    padding:15px;
    clear:both;

}

#rightcolumn{
    float: left;
    width: 310px; /*Width of right column*/
    margin-left: -311px; /*Set left margin to -(RightColumnWidth) */
    background: none;
    padding-top:20px;
    margin-top:1px;
    border-left:1px solid #222222;

}

#rightcolumn h2{
    font:18px georgia;
    font-weight:bold;
    border-bottom:2px solid #222222;
}


#footer{
    clear: left;
    width: 100%;
    background: black;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
}

#footer a{
    color: #FFFF80;
}

.innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
}  

body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    background:#f7f7f7;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
    width: 1000px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/

}

#topsection{
    background: #f0f0f0;
    height: 90px; /*Height of top section*/
}

#topsection h1{
    margin: 0;
    padding-top: 15px;
}

#content-container{
    float:left;
    width:100%;
    background:#f8f8f8;
    border:1px solid #f0f0f0;
    margin-top:-22px;

    margin-left:-1px;
    height:auto;

}

#contentwrapper{
    float: left;
    width: 100%;

}

#contentcolumn{
    margin-right: 310px; /*Set right margin to RightColumnWidth*/
    background:none;
    padding:15px;
    clear:both;

}

#rightcolumn{
    float: left;
    width: 310px; /*Width of right column*/
    margin-left: -311px; /*Set left margin to -(RightColumnWidth) */
    background: none;
    padding-top:20px;
    margin-top:1px;
    border-left:1px solid #222222;
}

#rightcolumn h2{
    font:18px georgia;
    font-weight:bold;
    border-bottom:2px solid #222222;
}


#footer{
    clear: left;
    width: 100%;
    background: black;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
}

#footer a{
    color: #FFFF80;
}

.innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
}

HTML代码

<div id="maincontainer">    
   <div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #2.2- (Fixed-Fixed)</h1></div>
</div>

<div id="content-container">
   <div id="contentwrapper">
    <div id="contentcolumn">
      <div class="innertube">
         content here
      </div> 
    </div>
   </div>
</div>

<div id="rightcolumn">
    <div class="innertube">
      content here
    </div>
</div>
</div>

   <div id="footer"><a href="#">UIasdfg</a></div>
</div>

Answer 1

Demo

您的代码似乎工作正常，只有轻微的提示才能顺利运行：

给body height:100%;
在班级innertube中，使用paragrap来显示内容，通过这种方式，您将在显示大文字段时获得更好的灵活性。使用word-break: break-all代表

喜欢这个

<div class="innertube"> <p style="word-break: break-all;"> content here content here content here content here content here content here content here content here content here </p> </div>

和clear:both清除所有浮点数：

</div> <!-- #content-container -->
 <div style="clear:both"></div>

Answer 2

好的，我想我已经明白了。使用我创建的相同JsFiddle ...我只在一个CSS元素中添加了一个小调整，如下所示。我们来自：

   #contentcolumn {
       margin-right: 310px;
       /*Set right margin to RightColumnWidth*/
       background:none;
       padding:15px;
       clear:both;
   }

然后我添加的是一个简单的显示，最终是：

   #contentcolumn {
       margin-right: 310px;
       /*Set right margin to RightColumnWidth*/
       background:none;
       padding:15px;
       clear:both;
    display:inline;
   }

这使得该div内部的任何内容都能保持在该div内部。这是demo，它提供了我所说的更好的例子。

有几点需要注意，我确实添加了背景颜色，以便您可以有效地看到正在发生的变化，以及我添加了一个高度，这不需要在那里..再次，我添加到告诉你最里面的div发生了什么。

一个非常棒的工具可以帮助您理解其工作原理Almanac，它将向您展示许多工具来帮助您满足任何CSS需求。我想指出，@ Mr.Alien的stack问题是另一个远远超出年历解释的资源。如果您还需要其他信息，请告诉我们。）

外部div没有扩大内部div的高度

2 个答案: