100% high div within a twitter bootstrap container

Question

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%;
}

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 — Pete, Aug 18 '16 at 11:37
Good idea @Pete, just tried it, along with also min-height:100%. No effect though. — Ian, Aug 18 '16 at 11:43
seems to work for me: http://www.bootply.com/RSJVPKBX7T. Are you sure your tall class does what you think it does? — Pete, Aug 18 '16 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? — Ian, Aug 18 '16 at 12:22
Bootply automatically includes Bootstrap (just need to pick the version) — Carol Skelly, Aug 18 '16 at 13:20
Hi there. Just checking if your problem was successfully solved? If so, can you please pick one of the answers to mark as correct; this prevents this question from showing up on the 'Unanswered' tab. If not, can you please list any problems you're still facing, so that I can try to help you further. Cheers! — Obsidian Age, Sep 22 '16 at 04:47

Obsidian Age · Answer 1 · 2016-08-19T00:11:29.447

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

edited Aug 19 '16 at 00:11

answered Aug 18 '16 at 11:15

Obsidian Age

41,205
10
48
71

Good catch. That makes me feel stoopid :) Regrettably though it doesn't fix the problem. – Ian Aug 18 '16 at 11:23
I've updated my answer, and it should hopefully now solve your problem :) – Obsidian Age Aug 19 '16 at 00:15

score 0 · Answer 2 · answered Aug 18 '16 at 11:22

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

answered Aug 18 '16 at 11:22

Majid

2,507
2
19
18

Thanks Majid. That doesn't work with a Bootstrap container though. – Ian Aug 18 '16 at 11:38
please have a look http://codepen.io/mhadaily/pen/RRdXpY , it can be applied to bootstrap as well. no worries. check the link out. – Majid Aug 19 '16 at 04:48

Ian · Accepted Answer · 2016-08-18T13:49:37.337

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.)

100% high div within a twitter bootstrap container

3 Answers3