Html 使div'；s高度页面的其余部分为响应性设计

在我的响应式设计中，我希望页脚贴在底部，内容填满页面的其余部分。

在本例中，页眉的高度始终为70px，但内容和页脚是响应性的，因此我无法知道它们的高度。 我尝试使用bottom:0将页脚设置为绝对值，使用top 70px和bottom 0将内容设置为绝对值，但在小型设备上，页脚位于内容顶部并将其隐藏

.wrapper，
.标题，
.内容，
.页脚{
宽度：100%；
}
.标题{
高度：70像素；
背景：橙色；
}
.页脚{
背景：浅蓝色；
}
.内容{
背景：黄色；
}

标题
内容
页脚

以下是我在JSFIDLE中更新的代码：

HTML

.wrapper，
.标题，
.内容，
.页脚{
宽度：100%；
}
身体{
保证金：0；
填充：0；
}
.标题{
高度：70像素；
背景：橙色；
宽度：100%；
}
.页脚{
背景：浅蓝色；
底部：0；
位置：固定；
高度：30px；
宽度：100%；
}
.内容{
背景：黄色；
位置：绝对位置；
顶部：70像素；
底部：30px；
左：0；
右：0；
}

标题
内容
页脚

如果您不知道页脚的大小（如您在问题中所说），代码将动态计算页脚高度，然后相应地设置内容高度

var pageheight=$（窗口）.height（）；
var restheight=$（'.header'）.height（）+$（'.footer'）.height（）；
$（'.content'）.height（pageheight-restheight）
正文
{
填充：0；
保证金：0；
}
.wrapper，
.标题，
.内容，
.页脚{
宽度：100%；
}
.标题{
高度：70像素；
背景：橙色；
}
.页脚{
背景：浅蓝色；
位置：固定；
底部：0；
}
.内容{
背景：黄色；
}

标题
内容
页脚
这么多选项，让我们讨论一个：
为此，我假设您是决定页脚和页眉项目大小的人，这意味着您知道它们的大小

对html稍作修改：

HTML


.wrapper{
身高：100%；
宽度：100%；
位置：相对位置；
}
.标题{
位置：固定；
顶部：0px；
左：0px；
z指数：10；
宽度：100%；
高度：70像素；
}
.页脚{
位置：固定；
底部：0px；
左：0px；
z指数：10；
宽度：100%；
高度：70像素；
}
.内容{
位置：绝对位置；
左：0px；
顶部：0px；
身高：100%；
宽度：100%；
框大小：边框框；
填充：70px 0 70px 0；
}
.内部内容{
位置：相对位置；
身高：100%；
宽度：100%；
}

标题
内容
页脚
位置：已修复
帮助您，但如果您的内容很长，则内容将向下滚动，并在最后一次页脚显示时显示，例如显示JSFIDLE演示。


.content{
高度：10px
}
.标题{
高度：70像素；
背景：橙色；
}
.内容{
背景：黄色；
身高：100%；
}
.页脚{
背景：浅蓝色；
位置：固定；
左：0；
右：0；
底部：0；
高度：50px；
}

标题
内容








废话
废话
废话








废话
废话
废话








废话
废话
废话








废话
废话
废话








废话
废话
废话








废话
废话
废话








废话
废话
废话
页脚
您能将页脚固定高度吗？这可能会对您有所帮助。您必须固定页脚的
位置：fixed
您已经为页脚设置了高度。OP说它有一个可变的高度：（是的，但是魔术从来没有发生过，页脚是如何改变高度的？我只是假设，当测量不同的屏幕大小时，在某个地方设置了高度。即使是通过javascript完成的，您仍然可以在同一脚本中更改填充的高度。您已经为页脚设置了高度。OP说它有一个可变的高度：(