Html CSS<；部门>；样式短于子元素

我正在进行一个项目，以更好地了解SpringMVC实践。为了做到这一点，我已经创建了一个非常小的Twitter版本。基本上，用户可以登录并发布一个小广告，还可以看到他们以前的广告和所有追随者的广告的时间线

我在整个页面上都有一个背景图像，中间有一个浅蓝色背景的容器，只用于后模糊框和时间线。浅蓝色背景仅位于可见页面的底部。如果时间线向下经过一个需要向下滚动的单页视图，浅蓝色背景将停止在初始加载时可见的底部

我的页面定义如下： div class=blurb是时间线中的模糊

<div id="container">
    <div id="mainPanel">
        <div id="timeline">
                <div class="class="blurb"">
                    <span class="user">test</span> <span
                        class="displayName">Test User</span> <span class="bodytext">This is a small blurb.</span>
                    <span class="timestamp">1 hours ago</span>
                </div>

                <div class="blurb">
                    <span class="user">admin</span> <span
                        class="displayName">Test admin</span> <span class="bodytext">This is another small blurb.</span>
                    <span class="timestamp">1 hours ago</span>
                </div>  
        </div>
    </div>
</div>

我是否可以修改容器CSS，使其与时间线一样长？时间线随着每一篇宣传文章而增长

高度定义为100%的屏幕截图

高度未定义的屏幕截图

更新： 好吧，这绝对和花车有关。感谢下面的两位评论者。#socialPanel的定义如下：

#socialPanel {
    width: 250px;
    float: right;
}  

使用Chrome的开发者工具，如果我清除了float is，就会将社交面板放在我的blurbs/tweets下面，并将浅蓝色背景一直移动到blurbs列表的下方

有什么建议可以让socialPanel保持在顶部浮动，但我的浅蓝色背景仍然使用所有可用的高度？非常感谢你帮我解决了这个问题

更新二：

我结合了下面答案中所示的方法来解决我的问题。我添加了一个div，其中class clear带有

clear:both然后删除
高度：100%来自#容器样式。这就解决了问题

注意：
添加
溢出：隐藏我的容器的样式使页面在浅蓝色区域后被切掉，但没有使浅蓝色区域一直向下

非常感谢所有的帮助！我还在学习，这一切都非常感激
 如果您只是从
#容器
中删除高度声明（
高度：100%；
），它将像它的子容器一样展开（当然还有背景）。
如果您只是从
#容器
中删除高度声明（
高度：100%；
），它将像它的子容器一样展开（当然还有背景）。
您可能只需要在两个内部div之后添加一个清除div

}

正如@MichaelIrigoyen所指出的，你也可以在你的容器中添加
overflow:hidden
或
overflow:auto
（我认为更有意义）。这更干净，我喜欢它！
你可能只需要在两个内部div之后添加一个清除div

}

正如@MichaelIrigoyen所指出的，您也可以将
overflow:hidden
或
overflow:auto
（我认为更有意义）添加到您的容器中。这更干净，我喜欢它！
将
overflow:hidden
放在
容器上

它是如何工作的？

有人会认为，将此样式放置在容器上会隐藏浮点数，而不是包含浮点数。实际情况是，
溢出：隐藏
会使元素建立一个新的浮点数。这修复了浮点数中所有子元素的浮点数。此CSS修复比在HTML st中包含一个额外的元素更实用yled带有
clear:这两个都可以在所有现代浏览器上使用，包括IE7+。
将
溢出：隐藏在
容器上

它是如何工作的？

有人会认为，将此样式放置在容器上会隐藏浮点数，而不是包含浮点数。实际情况是，
溢出：隐藏
会使元素建立一个新的浮点数。这修复了浮点数中所有子元素的浮点数。此CSS修复比在HTML st中包含一个额外的元素更实用在尝试了你的建议后，我在原始问题中添加了截图。我试图将截图放在你可以在chrome中看到开发者标签的地方。删除高度定义只会使顶部有一条蓝色的线。我不知道这是否重要，但是这是一个单独的css文件，由tomcat 7呈现的jsp页面使用。如果子对象不是浮动的，并且不清楚为什么要进行向下投票？这在没有浮动子对象的情况下有效（OP的问题没有提到浮动…）“更新：好的，所以它绝对与浮动有关。”在尝试了你的建议后，我在原始问题中添加了截图。我尝试将截图放在chrome中可以看到“开发者”选项卡的位置。删除高度定义只会使顶部有一条蓝色的线。我不知道这是否重要，但这是一个单独的css文件，由tomcat 7呈现的jsp页面正在使用。我会这样做的如果孩子们没有浮动，也不清楚为什么会投否决票？这在没有浮动孩子的情况下有效（OP的问题没有提到浮动…）“更新：好的，所以它绝对与浮动有关。”面板内div的CSS在哪里？您可能只需要清除float。这可能与#mainPanel和#socialPanel的CSS有关。如果这些内部div是浮动的或绝对定位的，则它们的高度不用于计算包含块的高度。主面板是浮动的，而socialPanel是浮动的向右浮动。这就是导致我身高下降的原因吗？我最初忽略了那些CSS样式，我真的认为它们不相关。我将尝试删除这些浮动。@Kyle是的。这是你的问题。删除浮动可能会导致其他问题（或者为什么在第一个位置使用它们）。你可能只能删除这些浮动
#socialPanel {
    width: 250px;
    float: right;
}  

<div class="outer">
  <div class="inner-left"> Stuff on the left</div>
  <div class="inner-right">Stuff on the right <br/><br/></div>    
  <div class="clearer"> </div>
</div>

.outer {
    width: 520px;
    padding: 10px;
    background-color: #eee;
}

.inner-left {
    float: left;
    width: 300px;
    background-color: red;
}

.inner-right {
    float: right;
    width: 200px;
    background-color: yellow;
}

.clearer {
      clear: both;