-1

I'm trying to put a 100% high google map into a Twitter Bootstrap container but it renders as 0px high.

From what I understand from Twitter Bootstrap: div in container with 100% height I added a css class to the container-fluid div with "height: 100%; min-height: 100%;", but it made no difference:

<body> <div class="container-fluid tall"> <div class="row"> <div class="col-md-6"> <div id="map-canvas"></div> </div> ... #map-canvas { width: 100%; height: 100%; margin-bottom: 15px; border: 2px solid #000000; } .tall { height: 100%; min-height: 100%; }
Improve this question
7
  • 1
    did you also add html, body { height:100%;} and also, all the ancestors of map-canvas will need a height set on them - for any percentage heights, you must have a height on all ancestors until a fixed height is found, if no fixed height is found then the percentage heights must go all the way back to the body and html tags Commented Aug 18, 2016 at 11:37
  • Good idea @Pete, just tried it, along with also min-height:100%. No effect though. Commented Aug 18, 2016 at 11:43
  • 1
    seems to work for me: bootply.com/RSJVPKBX7T. Are you sure your tall class does what you think it does? Commented Aug 18, 2016 at 12:02
  • I'm not familiar with bootply but I can't see anywhere the bootstrap libraries are being loaded. Are they in there? Commented Aug 18, 2016 at 12:22
  • 1
    Bootply automatically includes Bootstrap (just need to pick the version) Commented Aug 18, 2016 at 13:20

3 Answers 3

Reset to default
1

You're using the CSS ID selector #tall, but specifying a class of tall in the HTML. You'll need to change #tall to .tall in the CSS.

I was also messing around with CodePen, and it would seem that you need to either specify a #map-canvas height based on the height of the window (vh), or specify a height for all parent divs up to and including the div where you specify the fixed height that you want the map to occupy. Note that margin-bottom won't effect #map-canvas, and that you don't need to specify a minimum-height.

Check out the CodePen below for an implementation showcasing how a parent div can specify the height of the map. The map div has a height and width of 100% of the parent, and will adapt accordingly:

http://codepen.io/Obsidian-Age/pen/AXzXzv

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Good catch. That makes me feel stoopid :) Regrettably though it doesn't fix the problem.
I've updated my answer, and it should hopefully now solve your problem :)
0

You can change your code to be similar to the code below: HTML change to:

<div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div id="map-canvas"></div> </div> </div> </div>

and css change to 

#map-canvas { width: 100%; min-height: 100vh; height: 100%; margin-bottom: 15px; border: 2px solid #000000; }

here is a preview:

http://codepen.io/mhadaily/pen/RRdXpY

Improve this answer

2 Comments

Thanks Majid. That doesn't work with a Bootstrap container though.
please have a look codepen.io/mhadaily/pen/RRdXpY , it can be applied to bootstrap as well. no worries. check the link out.
0

I /think/ I may have sorted this out, based on Pete's comments (so really this is /his/ answer.)

It seems that /every/ element down to the map container requires the tall class, and the map container itself requires "height: 100%; min-height: 600px;", something like:

html, body { height: 100%; min-height: 100%; } .tall { height: 100%; min-height: 100%; } #map-canvas { ... height: 100%; min-height: 600px; }

Not sure if this is a bootstrap requirement or a google maps one.

(I did put a comment in the OP warning that I was not a CSS guru, but someone removed it. I apologise if the absence of that mislead anyone into thinking I knew what I was doing.)

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.