当div内的内容增加时，主容器div的高度不会动态增加

Question

以下是我目前得到的以及我想要实现的目标。第二个图像我已经能够通过手动增加像素的高度只是为了说明目的，但我希望这可以从容器内容的大小自动实现。 （是的，我之前发过这个问题，但我意外地发布了错误的html和css编码）。

IMAGE1：

图像2：

HTML：

<div id="top-body" style="clear:both">

<div class="content" style="clear:both;">

<div class="services_text">
<h1><span class="red">CLASSES</span></h1>


<p class="classes">Dixon - Woods School of Dance train children from the age of 3 years upwards. All lessons consist of ballet, tap and modern/ jazz. Separate lessons are given in acrobatic and lyrical. </p>

<br><p class="classes">All Newbold Verdon children attend on Tuesdays. Oadby pupils attend Saturdays and mid-week for stage class lessons. </p>

<br><p class="classes">All pupils study the British Theatre Dance Association Syllabus, the school boasts an exceptionally high standard. To date the school has a 100% pass rate in examinations and medals with the above association with many children gaining the highest mark of distinction. </p>

<br><p class="classes">Children who wish to take their dancing further, attend stage class lessons. Stage class gives the opportunity for pupils to represent the school in dance festivals and is a further commitment to the school as they are also part of a troupe who dance for the school in competitions. Stage class pupils are also more involved in our annual show. </p> 

<br><p class="classes">Adult tap lessons are availible on wednesday evenings, your never to old to start..! </p>

<br><p class="classes">For further details please contact us, via our contact us section. </p>
</div>

<div class="services_outer">

<div class="services_text_padding"><span class="services_text_1">KITCHEN &amp; BATHROOM DESIGN</span></div>

<div class="services_text_padding"><span class="services_text_1">SOLID WOOD<br>
  &amp; LAMINATE FLOORING</span></div>

<div class="services_text_padding"><span class="services_text_1">PLYWOOD,<br>
  MDF &amp; TIMBER CUTTING</span></div>

<div class="services_text_padding"><span class="services_text_1">KEY CUTTING SERVICES</span></div>

<div class="services_text_padding"><span class="services_text_1">POWER TOOL REPAIRS &amp; SHARPENING</span></div>

</div>
</div>
</div>

<div id="footer1">
    <div id="footer-image">
    </div>
</div>

CSS：

#top-body {
margin: 0 auto;
background-color: #ffffff;
height: auto;
width: 960px;
padding-top: 7px;
}

.content {
width: 960px;
padding: 0 1px 0 1px;
margin: 0 3px;
height: 351px;
}

.services_text {
width: 207px;
float: left;
padding: 17px 0px 0 20px;
}

h1 {
font-size: 1.1em;
font-weight: normal;
margin: 0;
color: #000;
padding-bottom: 10px;
font-style: normal;
}

.red {
color: #b5111a;
}

.services_outer {
width: 679px;
height: 351px;
background: url(../images/classes.png) 0 0 no-repeat;
margin: 1px 0 0 42px;
float: left;
}

.services_text_padding {
padding: 247px 0 0 13px;
float: left;
width: 126px;
}

.services_text_1 {
color: #FFF;
font-size: 1em;
line-height: 1.3;
}

p.classes {
font-size: 0.7em;
font-weight: normal;
margin: 0;
color: #000;
line-height: 1.3;
font-style: normal;
padding-bottom: 4px;
}

Answer 1

这是通过使用float：left;在顶部div和页脚div

Answer 2

在.content课程中，如果您将height:351px;更改为可以解决问题的min-height:351px

Answer 3

是的，我同意ddilsaver。如果可能，您可以摆脱height:351px;属性。这就是使div不增加的原因。