-3

我有一个页眉 div 和页脚 div。标题 div 从不移动；但是，无论屏幕大小如何，页脚 div 都必须位于窗口底部，即“粘性页脚”。在这两个 div 之间是一个动态填充的内容 div。

  1. 内容 div 的底部直接位于页脚 div 的顶部，它必须随着页脚 div 上下移动（当屏幕尺寸垂直扩展和收缩时）。它也可以被认为是“粘性的”。

  2. 但是，如果有足够的内容，则内容 div 必须垂直扩展（内容 div 的底部仍直接保留在页脚 div 的顶部）以容纳尽可能多的内容。这将发生，直到内容 div 的顶部运行到标题 div...

  3. 然后，如果在页眉和页脚 div 之间显示的内容过多，则内容 div 将变为可滚动的，内容 div 的高度会收缩，从而不会与页眉 div 重叠或与页脚 div 重叠。

  4. 同样，内容 div 永远不能与页眉 div 或页脚 div 重叠。如果两个 div 之间没有足够的空间在一个视图中显示所有内容，则内容 div 必须变为可滚动的overflow-y: scroll;。

这解释了我迄今为止的（徒劳的）尝试：
我还没有成功完成任何这些。我所拥有的东西很少，而且基本上没用。我遇到的一些问题是： 如果我制作页脚 divposition: absolute; bottom: 0px;这将是一个“粘性页脚”，并且无论垂直屏幕大小如何，都会留在我的屏幕底部。然而，通过这种绝对定位，内容 div 将很高兴地与页脚重叠。我试图通过制作内容 div 来防止这种情况position: absolute; bottom: 180px;。这180px是我的页脚 div 的高度。这行得通……有点。当需要动态添加内容时，它很快就会成为一个问题。内容 div 的顶部将很快与标题 div 重叠......所以我为内容 div 设置了一个固定高度，并在超过该高度时启用滚动，但这并没有考虑到比我自己更大的屏幕可能有更多空间显示内容的地方。

最终，这些都不是我需要的方式。使用 CSS 和/或 javascript（如果需要）完成此任务的最佳方法是什么？而且，是否有一个很好的起点可以让我走上您可能知道的正确轨道？

感谢您的帮助！

4

1 回答 1

1

我不认为这在没有flexbox. 如果你足够幸运，只需要支持支持 flexbox 的浏览器（或者如果你可以回退到旧浏览器中的标准布局），你可以试试这个：

HTML：

<header></header>

<div class="content">
    <div class="container"></div>
</div>

<footer></footer>

CSS：

header, footer {
    position: fixed;
    left: 0; right: 0;
    height: 100px;
}

header { top: 0 }
footer { bottom: 0 }

.content {
    position: fixed;
    top: 100px; bottom: 100px;
    left: 0; right: 0;
    overflow-y: scroll;

    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    display: flex;

    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    -o-align-items: flex-end;
    align-items: flex-end;
}

这是小提琴：http: //jsfiddle.net/qhKa9/

如果您对 JavaScript 的依赖没有问题，那么可能会有一个不同的解决方案，它具有更深入的浏览器支持。这是一个镜头。

CSS：

header, footer {
    position: fixed;
    left: 0; right: 0;
    height: 100px;
}

header { top: 0 }
footer { bottom: 0 }

.content {
    position: fixed;
    top: 100px; bottom: 100px;
    left: 0; right: 0;
    overflow-y: scroll;
}

.container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

JavaScript（使用 jQuery）：

var $content = $('.content'),
    $container = $('.container'),
    containerHeight = $container.outerHeight();

$(window).resize(function () {
    $container.css({
        position: $content.innerHeight() > containerHeight ? 'absolute' : 'static'
    });
}).resize();

这是小提琴：http: //jsfiddle.net/N672c/

PS您可能应该限制调整事件侦听器的大小，但这是另一天的讨论。

于 2013-01-20T05:58:18.443 回答