如何拉伸贴在顶部的导航栏和贴在底部的页脚之间的 div 高度？

Question

我有一个 bing 地图的 div，我想拉伸它以填充所有高度。 对于宽度，我只使用了container-fluid但高度更棘手，因为导航栏和页脚有一些恒定的高度，当我将地图高度设置为 90vh 时，如果我迟早更改窗口高度，地图将被页脚覆盖一点或如果宽度较小，导航栏高度可能会发生变化，因为所有文本都无法放在一行中，并且地图将再次被覆盖一点并显示滚动条。

导航栏位于页面顶部，页脚贴在底部。 我不想有滚动条。 我想以某种方式将带有地图的 div 锚定到导航栏和页脚，以便它在它们之间完全伸展。 有没有办法让上面的 div 保持 10px 的距离，下面的 div 保持 10px 的距离？ 所以它会拉伸或收缩以保持它？

如何使用 bootstrap 和/或 css 实现这一点？

Answer 1

像这样的东西

 /* Required Stuff */ body { margin: 0; height: 100%; } #wrapper { display: grid; grid-template-rows: 30px 1fr 30px; } #content { height:auto /* or overflow-y: scroll; for fixed header and footer */ } /* Optional Stuff */ #wrapper { gap: 1px; height: 100%; border: 1px solid black; background-color: black; } #wrapper > * { padding: 5px; background-color: white; } /* do not copy this into your own projects */ /* stack overflow needs fixed height */ /* just pretend "180px" is just the full page size */ #header { background-color:green; } #footer { background-color:blue; }

 <body> <div id="wrapper"> <div id="header">Header Content</div> <div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="footer">Footer Content</div> </div> </body>

如何拉伸贴在顶部的导航栏和贴在底部的页脚之间的 div 高度？

问题描述

1 个解决方案

解决方案1
0 2019-11-30 20:46:01

如何拉伸贴在顶部的导航栏和贴在底部的页脚之间的 div 高度？

问题描述

1 个解决方案

解决方案1 0 2019-11-30 20:46:01

解决方案1
0 2019-11-30 20:46:01