如何创建div以填充页眉和页脚div之间的所有空间
我正在努力从使用表格进行布局过渡到使用div（是的，是的，是伟大的辩论）。我有3个div，页眉，内容和页脚。页眉和页脚各为50px。如何使页脚div停留在页面底部，而内容div填充两者之间的空间？我不想硬编码内容div的高度，因为屏幕分辨率会改变。
问题答案：
使用flex布局，我们可以在实现自然高度的页眉和页脚的同时实现这一目标。页眉和页脚都将分别贴在视口的顶部和底部（非常类似于本机移动应用程序），并且主要内容区域将填充剩余的空间，而任何垂直溢出都将在该区域内滚动。
HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header,
footer {
flex: none;
}
main {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
flex: auto;
}
-
我在HTML正文中有一个名为RecipeContainer的div。我正在尝试使用一个API来根据用户的关键字搜索菜谱。最初，我在一个HTML中有6个DIV，它们被填充在我的javascript中，并使用CSS样式，但我认为这不再是一个有效的解决方案。 下面是我当前的代码，它试图将功能转移到完全在JS中创建的每个菜谱的平铺中： 这是每当用户点击Submit时执行的循环。实际上，我有两个问题与此相关
-
我有一个具有绝对位置的div元素。位置值很重要，不能更改。如何在div中设置页眉、内容和页脚？ 页眉和页脚的高度是固定的，内容应该占用剩下的所有空间。同样重要的是，页眉始终在顶部，页脚在底部。 父元素也应该是可调整大小的，并使用south resizable句柄，内容应该根据父元素的高度改变其高度。 情况示例:http://jsfidle.net/7gpzf/26/
-
问题内容： 我有2个div： 页面左侧有一个，右侧是一个。左侧的一个宽度固定，我希望右侧的一个填充剩余空间。 问题答案： 这似乎可以完成您想要的。
-
注意: Adobe Muse 不再添加新增功能，并将于 2020 年 3 月 26 日停止支持。有关详细信息和帮助，请参阅 Adobe Muse 服务结束页面。 使用 Adobe Muse 时，能以简单的方式创建网页的页眉和页脚。保持页眉和页脚元素不变，使网站的外观保持一致是不错的做法。要在 Adobe Muse 中实现这一点，可以在主页中定义页眉和页脚元素。更新主页会在网站的所有页面上完成更改。
-
问题内容： 我有一个如下所示的div页面 样式 我想调整div的高度以填充（或拉伸到）整个div （标有绿色边框），并且不想越过页脚divD。我该如何解决？ 问题答案： 只需添加到造型。应该没有必要。
-
也许以前有人问过这个问题，但我似乎找不到一个准确的答案或解决办法。我开始使用RecycerView，并使用LinearLayoutManager实现了它。现在，我想添加自定义的页眉和页脚项，这些项不同于RecycerView中的其他项。页眉和页脚不应该粘，我希望他们滚动与其余的项目。有人能指出一些例子如何做到这一点或只是分享想法。我会非常感激的。THX