Vue2 leaflet forcing map to have 100% height of parent container

1
votes

How to make Vue2-leaflet map have 100% height of its parent container?

When I set its style to style="height: 100%" it is overwriting whole page on first interaction with the map and tile layer isn't showed at all.

1
vuejs2leaflet
can you create an example on jsfiddle or codepen? – Anatoly
@Anatoly jsfiddle.net/be07jrwa I would like the map to take all space of #map-wrapper div but it adds scroll. – stasiekz
@stasiekz In your Fiddle it adds a scrollbar even if you remove the l-map completely. You've set height: 100% on map-wrapper, so once that's added to the 100px of some-div it overflows. For that example I'd just use flex-box instead but I'm not convinced that it's demonstrating the same problem you originally described in the question. – skirtle

1 Answers

0
votes

Use calc(100% - 100px) for #map-wrapper because #some-div has a height of 100px in your example. Then the scrollbar disappears.

#some-div {
  height: 100px;
}

#map-wrapper {
  background-color: red;
  height: calc(100% - 100px);
  margin: 0;
}

Fiddle: https://jsfiddle.net/yLe9n1uk/

Or use a flexbox for the parent div (#app):

#app {
  display: flex;
  flex-direction: column;
}

#some-div {
  height: 100px;
}

#map-wrapper {
  background-color: red;
  height: 100%;
  margin: 0;
}

Fiddle: https://jsfiddle.net/xo5z8r7q/