【问题标题】:CSS: Height in a previous DIV is pushing down the footer with Clear:BothCSS:前一个 DIV 中的高度用 Clear:Both 向下推页脚
【发布时间】:2012-10-06 02:19:42
【问题描述】:

我遇到了一个问题,我在页脚上方的 div 中设置了最小高度。为了使页脚中的文本居中对齐,我在 CSS 中使用 clear:both。唯一的问题是现在内容和页脚之间有很大的空间?

这是我正在开发的网站: http://brimbar.com/no_crawl/RiverHollow/about.html

谢谢!

【问题讨论】:

    标签: css


    【解决方案1】:

    这是因为您拥有带有巨型margin-bottom 的浮动图像。 clear: both 的意思是“这个元素的两边都不能有任何元素”,所以页脚必须低于 600px 的边距。

    没有clear: both,页脚文本不会居中的原因是因为它仅在 div 开头和该图像左侧之间的宽度内居中(加上它的巨大边距)。

    您应该做的是更改标记,以便您的图像出现在内容 div 内的另一个列 div 中,因为您似乎希望将其显示在自己的列中而不是浮动的。如果这样做,您将不需要巨大的边距,也不需要在您的页脚元素上使用clear: both

    这是一个演示:http://jsbin.com/uxiqer/1/edit

    请注意,您可以使用浮点数或position: absolute.images div 定位在右侧;我只是觉得position: absolute 更容易使用。

    如果您不需要图像在自己的列中显示,那么您可以简单地将浮动保留在图像上并删除margin-bottom,然后文本将很好地环绕图像及其边缘。这是float 的预期目的。然后没有溢出内容div的巨大边距,页脚文本可以正确居中而无需clear: both

    【讨论】:

      【解决方案2】:

      删除 clear: both 并向页脚添加特定高度,而不仅仅是最小高度。我无法让您的文本对齐,但我敢打赌,如果您删除了“position:static”就可以了。

      由于您在容器本身上硬编码了 1550 像素的高度,因此页脚占用了剩余的可用空间,因为它只有“最小高度”要求而不是最大高度。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-04-03
        • 1970-01-01
        • 2013-02-16
        • 1970-01-01
        相关资源
        最近更新 更多