0

I have a div which is bing map and i want to stretch it to fill all height. For width i just used container-fluid but height is more tricky because nav bar and footer have some constant height and when i set map height to lets say 90vh then if i change window height sooner or later map will be covered a little with footer or navbar height can change if width is smaller because all text won't fit in one line and once again map will be covered a little and scrollbar shows up.

Nav bar is at top of the page and footer is sticked to the bottom. I dont want to have scrollbar. I want to somehow anchor div with map to the nav bar and to footer so it will fully stretch between them. Is there a way to keep for example 10px distance to div above and 10px to div bellow? So it will stretch or shrink to keep that?

How to achive this with bootstrap and/or css?

kkamil4sz
  • 431
  • 1
  • 5
  • 19

1 Answers1

0

Something like this

/* 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>
RezaGhahari
  • 405
  • 3
  • 9
  • empty content div has height 0 (Empty because its just bing map holder) after i applied your solution. It doesn't work or it conflicts somehow with existing bootstrap class settings? – kkamil4sz Nov 30 '19 at 21:02
  • please visit this link too:https://stackoverflow.com/questions/18905546/making-the-bing-map-api-map-responsive – RezaGhahari Nov 30 '19 at 21:07