2

我正在做一个项目来更好地了解 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% 的屏幕截图 在容器样式中定义为 100% 的高度

高度未定义的屏幕截图 容器样式中未定义的高度

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

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

使用 Chrome 的开发人员工具，如果我清除浮动，则将社交面板放在我的简介/推文下方，并将浅蓝色背景一直移动到简介列表的下方。

关于我可以研究什么以使 socialPanel 保持在顶部左侧浮动，但我的浅蓝色背景仍然使用所有可用高度的任何建议？非常感谢帮助我解决这个问题！

更新二：

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

注意： 添加overflow: hidden;到我的容器样式中会使页面在浅蓝色区域之后被切断，它不会使浅蓝色区域一直向下。

非常感谢所有的帮助！我还在学习，这一切都非常感谢！

4

3 回答 3

2

放在. overflow:hidden_#container

它是如何工作的？

有人会认为将这种样式放在容器上会隐藏浮动而不是包含它们。实际发生的是overflow:hidden使元素建立一个新的块格式化上下文。这修复了漂浮在其中的任何子项的浮动包含。这个 CSS 修复比在 HTML 中包含一个附加元素更实用，clear:both并且适用于所有现代浏览器，包括 IE7+。

于 2013-02-26T19:59:51.897 回答
1

如果您只是从 中删除高度声明 ( height: 100%;) #container，它将像其子项一样扩展（当然还有背景）。

于 2013-02-26T19:34:47.863 回答
1

您可能只需要在两个内部 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: hiddenor overflow:auto（我认为更有意义）添加到您的容器中。http://jsfiddle.net/c3vTU/4/这更干净，我喜欢它！

于 2013-02-26T19:56:38.193 回答