时间戳

首页 > 解决方案 > 如何在贴在顶部的导航栏和贴在底部的页脚之间拉伸 div 高度？

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

问题描述

我有一个 div 是 bing 地图，我想拉伸它以填充所有高度。对于我刚刚使用的宽度，container-fluid但高度更棘手，因为导航栏和页脚有一些恒定的高度，当我将地图高度设置为 90vh 时，如果我迟早更改窗口高度，地图将被页脚或导航栏高度覆盖一点可以如果宽度更小，则更改，因为所有文本都不适合一行，并且地图将再次被覆盖一点并显示滚动条。

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

如何使用引导程序和/或 css 实现这一目标？

标签： htmlcssasp.netasp.net-mvcbootstrap-4

解决方案

像这样的东西

/* 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>

推荐阅读