Javascript 如何定位两个div“；标题“；及；页脚“；围绕一个div“；内容“；

我需要根据内容高度来定位页眉和页脚。 因此，页眉和页脚与内容相邻，即使内容大小发生变化。 我想知道是否存在CSS解决方案（甚至CSS 3），是否没有JS解决方案

注意：我无法更改HTML中DIV的顺序。 下面是所需布局的图片

详情如下：

• 我需要顶部的内容定位后刚刚结束 收割台的底部

• 我需要的页脚顶部的位置后刚刚结束 内容的底部

• 如果标题更改高度，则内容应向上/向下移动

• 如果内容更改高度，则页脚应向上/向下移动

实时代码：

欢迎举例：）

#内容-a，#内容-b{
位置：绝对位置；
宽度：500px；
高度：250px；
}
#内容a{
背景色：红色；
}
#内容-b{
背景颜色：黄色；
}
#主人{
位置：绝对位置；
左：60px；
z指数：100；
}
#页眉，#页脚{
宽度：500px；
高度：50px；
}
#标题{
背景颜色：灰色；
}
#页脚{
背景颜色：蓝色；
}
内容a
内容a
标题
页脚

明白了我想：

我所做的： 由于除标题外，所有内容的顺序都正确，因此我们可以执行以下操作：

移除所有位置：绝对位置； 将页边距顶部：50px放在content-a上 放置位置：ansolute；顶部：0px；在#标题上 您还可以编辑#content-a，使其具有最小高度：250px；要调整内容的高度，请执行以下操作：

就这样

<div id="content-a">content a</div>
<div id="content-b" style="display:none">content a</div>
<div id="master">
    <div id="header">header</div>
    <div id="footer">footer</div>
</div>

---

对于html结构，这在纯css中是不可能的，尤其是页眉和页脚的动态高度-因为它们位于单独的div中，内容div不可能知道还有多少空间需要占用。您需要使用js来移动div和计算高度，但我将按照以下步骤进行操作：

body, html {
    height:100%;
    position:relative;
    margin:0;
    padding:0;
}
#master {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
#master > div {
    display:table;
    width:100%;
    height:100%;
}
#master > div > div {
    display:table-row;
    width:100%;
}

在jquery的帮助下，对元素重新排序：

$('#master').wrapInner('<div/>');
$('#content-b').insertAfter($('#content-a').insertAfter($('#header')));

$（“#master”）.wrapInner（“”）；
$（'content-b'）。insertAfter（$（'content-a'）。insertAfter（$（'header'））；

---

我不清楚。你能提供你想要达到的目标的图片吗……你是否坚持那种html结构？因为如果您只是将页眉放在内容的上方，页脚放在内容的下方，那么它应该是默认值。很遗憾，我无法更改HTML结构：（我没有时间给你一个完整的答案，但是你应该看看flexbox：你的意思是这样的吗？使用jQuery？不，我不能更改HTML结构。谢谢你花时间在这方面。现在看到上面的答案谢谢，但我想如果你的解决方案页眉高度会改变，内容不会上下调整，因为你使用的是边距作为内容的固定大小。您没有告诉我们页眉会改变高度，只会改变内容。我看到您现在已将其添加到您的问题中

body, html {
    height:100%;
    position:relative;
    margin:0;
    padding:0;
}
#master {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
#master > div {
    display:table;
    width:100%;
    height:100%;
}
#master > div > div {
    display:table-row;
    width:100%;
}

$('#master').wrapInner('<div/>');
$('#content-b').insertAfter($('#content-a').insertAfter($('#header')));