2

我需要的是一个非常基本的布局，只有两个主要部分：内容和页脚。页脚应始终位于视口底部。所以我有：

  • 内容（位置：相对）
  • 页脚（位置：固定；底部：0px）当我的内容很少时，它会起作用（见图1）。

当视口太短或有很多内容时，问题就开始了（见图2）。

内容位于页脚后面（重叠）并出现页面滚动。

我也不希望它走在前面。我想要的是这个（见图3）

内容不与页脚重叠，页面滚动只滚动内容div。

我不知道如何做到这一点，或者即使它可以做到。我不介意使用 jquery，也不关心 ie6。任何帮助将不胜感激

谢谢

编辑：

谢谢你的回复。

我正在上传几张图片，以便您更好地了解我的需求。

在图片 1 http://estudioibarra.com/test/image1.jpg你可以看到我想要的设计，在图片 2 http://estudioibarra.com/test/image2.jpg是同一张图片，并有一些解释。

我想要的是始终位于视口底部的标题，因为这是我的菜单。而且我不希望内容与我的菜单重叠。因为内容会有3个以上的项目。

我不想要的是这个http://estudioibarra.com/test/image3.jpg（内容出现在菜单后面）。

使用您的一些解决方案，我可以解决这个问题，但前提是我在容器 div 中有滚动条。我真的不喜欢那样。

是否可以使用主页滚动来滚动容器内容？

感谢你的宝贵时间

4

3 回答 3

4

如何简单地制作内容和页脚position: fixed并根据需要放置它们，例如这个演示：http: //jsfiddle.net/bAtVE/？

#content {
    position: fixed;
    height: 85%;
    width: 95%;
    border: 1px blue solid;
    overflow-y: auto;
}

#footer {
    position: fixed;
    height: 10%;
    width: 95%;
    bottom: 0;
    border: 1px red solid;
}

<div id="content">
    here is content
</div>
<div id="footer">
    This is footer
</div>

编辑：

我用position: absolute了这个时间（见http://jsfiddle.net/bAtVE/1/）。这可能是一个更好的做法，因为fixed位置不是跨浏览器兼容的。

#content {
    position: absolute;
    top: 0;
    left: 0;
    height: 85%;
    width: 100%;
    overflow-y: auto;
}

#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10%;
    width: 100%;
}

编辑2：

http://jsfiddle.net/bAtVE/2/

于 2011-03-25T23:36:14.487 回答
1

在下面的示例中，即使父元素中的内容溢出，页脚也将保持固定。容器尺寸可以是动态的，页脚宽度会相应调整。页脚依赖于容器而不是浏览器窗口，不像position:fixed. 使用 jQuery，您可以：

var cw = $('#container').innerWidth();

$('#header').css({
    'width': cw + "px"
});

$('#container').scroll(function() {
    $('#header').css({
        'bottom': -$('#container').scrollTop()
    })
})

在http://jsfiddle.net/M2n8Q/检查工作示例

于 2011-03-25T23:26:55.760 回答
1

将页脚固定在底部并赋予border-top与背景相同的颜色怎么样？

body { background:#eeeeed; }
#wrap { width:34em; margin:0 auto; }
#head, #foot { padding:1em 2em; }
#head, #main { background:#fff; }
#main { padding:0 2em 6em; }
#foot {
    bottom:0;
    color:#fff;
    width:30em;
    position:fixed;
    background:#444;
    text-align:center;
    border-top:1em solid #eeeeed;
}

演示：jsfiddle.net/Marcel/xgafM

于 2011-03-26T00:41:39.453 回答