Question

我正在开展一个项目，以提高我对Spring MVC实践的了解。为此，我一直在创建一个缩小版的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样式如下所示。

#container {
    width: 650px;
    height: 100%;
    margin: 0 auto;
    padding: 10px;
    background-color: #DDEEF6;
}

我可以修改容器CSS，使其与时间轴一样长吗？每个模糊帖子都会增加时间表。

高度定义为100％的屏幕截图 Height defined to 100% in container styling

高度未定义的屏幕截图 Height left undefined in container styling

更新好的，所以它绝对与花车有关。感谢下面的两位评论者。 #socialPanel定义如下：

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

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

有关我可以研究什么的建议，以保持社交窗格漂浮在顶部，但仍然有我的浅蓝色背景使用所有可用的高度？非常感谢帮我解决这个问题！

更新二：

我结合下面答案中显示的方法来解决我的问题。我添加了一个带有clear:both;类更清晰的div，然后从#container样式中删除了height: 100%;。这解决了这个问题。

注意： 将overflow: hidden;添加到我的容器的样式中使得页面在淡蓝色区域后被切断，它不会使淡蓝色区域完全消失。

非常感谢所有的帮助！我还在学习，非常感谢!!

Answer 1

将overflow:hidden放在#container上。

它是如何运作的？

有人会认为将这种风格放在容器上会隐藏浮动而不是包含浮动。实际发生的是overflow:hidden使元素建立新的block formatting context。这可以修复浮动在其中的任何子项的浮动包含。这个CSS修复更实用，然后在HTML中添加一个带有clear:both样式的附加元素，适用于所有现代浏览器，包括IE7 +。

Answer 2

如果您只是从height: 100%;移除高度声明（#container），它会像孩子一样展开（当然也是背景）。

Answer 3

你可能只需要在两个内部div之后添加一个清除div。 http://jsfiddle.net/c3vTU/1/

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

<强> CSS

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

}

正如@MichaelIrigoyen所指出的那样，您也可以将overflow: hidden或overflow:auto（我认为更有意义）添加到您的容器中。 http://jsfiddle.net/c3vTU/4/这更干净，我喜欢它！

CSS <div>样式比子元素短</div>

3 个答案: