我正试图为一个网站做一个模块。本模块将包括标题、文本和图像。我希望网站管理员能够插入尽可能多的这些模块，因为他喜欢进入一个页面，理想情况下，他应该能够键入尽可能多，他想在一个模块，并有它自动调整到适当的高度。
问题来了:
我似乎无法获得称为"mymodule"的整个模块的高度(保持标题，图像和文本的红色框)为自动高度，并且也有"moduleBody"设置为自动高度，没有两个div冲突。为了让"mymodule"识别里面的内容，使高度自动调整，我需要将定位设置为绝对。在这一点上，"mymodule"包含了它应该包含的一切，但"moduleBody"不是....moduleBody被折叠，并且不会确认里面的元素，除非我将它的位置设置为绝对。当我这样做"moduleBody"确实调整高度，但现在"myModule"不再包括"moduleBody"的高度，它只看到"moduleHeader"(不设置为position:absolute;)我怎样才能使"myModule"one_answers"moduleBody"自动高度，并使一切正常工作?
仅供参考:样式都直接嵌入到html中，我的完整版本绝对不会看起来这样，我这样做只是因为我想在测试时快速看到事情的样子。这些奇怪的颜色也是为了测试的目的。
感谢所有帮助我的人，林赛:)
myModule.html
<div id= "myModule"style="height:auto; width: 1000px; position:absolute; background-color:red;" >
<div id= "moduleHeader" style = "width:100%; height:auto; background-color:yellow; ">
<p style="text-align:left; font-family:Arial; font-size:22px; font-size:30px; color:#191970; margin-left:20px;">Who We Are
<span><b style="color:#999; font-size:20px;">Learn more about Trinity</b></span></p>
</div>
<div id= "moduleBody" style="background-color:#0E1031; width:800px; height:auto; margin-left:auto; margin-right:auto; padding:40px;border:thick solid #1B1851; border-radius: 15px; position:absolute;">
<p style=" text-align:justify; height:150px; width:500px; font-family:Arial; font-size:14px; line-height:150%; float:left; color:white; ">
The United Church of Christ acknowledges as its sole head, Jesus Christ, Son of God and Savior.
It acknowledges as kindred in Christ all who share in this confession. It looks to the Word of
God in the Scriptures, and to the presence and power of the Holy Spirit, to prosper its creative
and redemptive work in the world. It claims as its own the faith of the historic Church expressed
in the ancient creeds and reclaimed in the basic insights of the Protestant Reformers. It affirms
the responsibility of the Church in each generation to make this faith its own in reality of worship,
in honesty of thought and expression, and in purity of heart before God. In accordance with the teaching
of our Lord and the practice prevailing among evangelical Christians, it recognizes two sacraments:
Baptism and the Lords Supper or Holy Communion.
</p>
<div id="mod_Image" style="height:250px; width:200px;margin-left:40px; float:left; border:thick solid white;"><img src="churchImg.jpg" style="height:100%; width:100%; "/></div>
</div>
</div>
您需要在给您带来麻烦的两个div上设置overflow: auto;。这是一个包含浮动元素的元素的问题——它们自己崩溃，因为它们的内容已经从正常的内容流中删除了。他们没有任何东西告诉他们应该有多高)。
您所看到的行为是由于元素被浮动，这意味着它们已从正常流程中删除，并且在计算包含元素的高度时，浏览器将使用而不是。有很多关于CSS float的博客文章，所以我只链接一个作为背景阅读。
有很多方法可以解决这个问题，例如在quirkmode博客-清除浮动。最著名的是"clear fix"，可以在这里和下面找到一个例子:
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
那么应用到你的(清理过的)HTML就像在这个演示或下面@
<div id= "myModule">
<div id="moduleHeader">
<p>Who We Are <span><b style="color:#999; font-size:20px;">Learn more about Trinity</b></span></p>
</div>
<div id= "moduleBody" class="cf">
<p>The United Church of Christ acknowledges as its sole head, Jesus Christ, Son of God and Savior. It acknowledges as kindred in Christ all who share in this confession. It looks to the Word of God in the Scriptures, and to the presence and power of the Holy Spirit, to prosper its creative and redemptive work in the world. It claims as its own the faith of the historic Church expressed in the ancient creeds and reclaimed in the basic insights of the Protestant Reformers. It affirms the responsibility of the Church in each generation to make this faith its own in reality of worship, in honesty of thought and expression, and in purity of heart before God. In accordance with the teaching of our Lord and the practice prevailing among evangelical Christians, it recognizes two sacraments: Baptism and the Lords Supper or Holy Communion.</p>
<div id="mod_Image"><img src="churchImg.jpg"/></div>
</div>
</div>
#myModule {
width:1000px;
background-color:red;
}
#moduleHeader {
background-color:yellow;
}
#moduleHeader p {
text-align:left;
font-family:Arial;
font-size:22px;
font-size:30px;
color:#191970;
margin-left:20px;
}
#moduleBody {
background-color:#0E1031;
width:800px;
padding:40px;border:thick solid #1B1851;
border-radius: 15px;
}
#moduleBody p {
text-align:justify;
height:150px;
width:500px;
font-family:Arial;
font-size:14px;
line-height:150%;
float:left;
color:white;
}
#mod_Image {
height:250px;
width:200px;
margin-left:40px;
float:left;
border:thick solid white;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
请注意，您不需要指定height:auto, position:absolute, width:100%中的任何一个，因为这些是您应用它们的元素的默认值。
另一种方法是删除"clear fix"类和float:left，使用display:inline-block和vertical-align:top;代替，就像在这个替代演示中一样。