jquery - 粘性页脚高度问题

标签 jquery html css twitter-bootstrap sticky-footer

根据我的需要,我发现了一些粘性页脚。但现在我面临一个问题。 当我增加分辨率大于我的正常分辨率时,代码工作正常。但容器 div 和页脚 div 之间有间距。在这里,我还附上了我得到的和我想要的屏幕。 enter image description here

因此,根据图像,我想将 (A) 和 (B) 粘在一起。所以整个部分显示为单个 . 在这里我还添加了我的 css 代码。由于大量的 HTML 和 CSS 代码。我无法使用 JSfiddle。 我使用 Twitter Bootstrap 框架。

    html {
        position: relative;
        min-height: 100%;
    }
    body {
        margin: 0 0 100px; /* bottom = footer height */
    }
    footer {
        background: none repeat scroll 0 0 #FFFFFF;
        border-left: 1px solid #E1E1E1;
        border-right: 1px solid #E1E1E1;
        border-bottom: 1px solid #E1E1E1;
        position: absolute;
        bottom: 0;
        height: 100px;
    }

    #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -142px;
    }

最佳答案

正如我在图片中看到的那样,有 3 个方 block ,一个黑框,然后是一个红框,然后是黑框。

我可以建议您使用 C# 和 div。请尝试在此处获取概念并在您的案例中实现。

假设我有三个 div,就像您的情况一样。如果你让div 一个接一个出现,那么你需要遵循“float: left”属性,这样如果任何div 旁边没有空格,那么div 将一个接一个出现。这是因为 div 是 block 元素。

同样,只有当您将所有 div 放在一个具有相同“float: left”属性的容器/div 中时,这才有效。

让我们回到您的问题。在这里,您似乎一个接一个地拥有 2 个街区。但是当你放大红色容器时会出现很多空间。

我猜红色容器可能有一些高度或者可能继承了父元素的高度。检查一次。如果不是,则获取 border 属性,并将红色元素的边框设置为 0px。并在所有 3 个 block 中使用 float:left 属性,这样空间就不会从其他 block 元素继承。如果您可以将 3 个 block 放在一个具有 float:left 属性的 block 中,那就更好了。

希望这对您有用。

谢谢

关于jquery - 粘性页脚高度问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18610345/

相关文章:

css - 多个供应商的占位符样式不起作用

html - 将 html 图形宽度设置为其包含的图像宽度相同

jquery - Dojo 1.6 中相当于 jQuery(html) 的是什么?

php - json_encode 不适用于 PDO 获取的数据

jquery - 如何用iframe分割页面

javascript - 在 Bootstrap Adminlte 模板的菜单中创建子项时不会自动折叠

javascript - 为什么 Javascript 的 Date.getDate() .setDate() 行为如此不可预测?

html - 如何在流体容器元素内设置 div 宽度?

javascript - 如何找到响应按钮操作的 JavaScript 代码?

javascript - 在 JavaScript 中查找与网页上元素最近的命名 anchor