Twitter Bootstrap Question posted in

100% high div within a twitter bootstrap container

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

3

Answers


  1. Chosen as BEST ANSWER
    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.)


  2. 0

    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

    Login or Signup to reply.
  3. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search