1

I am new to bootstrap and web stuff in general. I am having trouble with an application I am developing. What I would like is to have a top bar with buttons that do things and below that a setup where 20% left is filled with a div and the other 80% is filled with a map.

I can get the split using col-md-2 and col-md-10 just fine but the map does not extend to 100% height (I would say it sits about 75%. I have tried many different things offered up here and other places to solve the 100% height but nothing seems to work.

I have put together this in way of an example of what I am currently trying. I stripped away most of the css as none of it was working for me.

http://www.bootply.com/0xx9zBH3Ke

if you can offer assistance I would appreciate it.

**edit I realized my bootply didnt illustrate my problem very well so I tossed the file at the link below to better show whats going on.

http://ec2-54-186-204-72.us-west-2.compute.amazonaws.com/demo2/bootysample.html

I have tried a couple of solutions but it still fights me by miss aligning things (mostly by placing the leftpane as its own row)

dave_does_not_understand
  • 115
  • 8
  • 1
    Similar to http://stackoverflow.com/questions/27571342/div-not-taking-height-of-parent-div-w-bootstrap – Wex Dec 19 '14 at 18:20
  • 1
    possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) – Wex Dec 19 '14 at 18:22

3 Answers3

0

Try adding a 100% height to the html or body elemement. Then wrap your 20-80% width divs in a wrapper div and also set that to 100% height.

Ines van Essen
  • 47
  • 1
  • 4
0

here is your solution

Bootply

#row {
    display: table;
}

#leftpane, #map {
    float: none;
    display: table-cell;
    vertical-align: top;
}
p0d4r14n
  • 681
  • 5
  • 15
0

Maybe you can use like this

.center-element{
     min-height: 100%;
     min-height: 50vh;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
}

Only problem is IE :(

Miomir Dancevic
  • 6,726
  • 15
  • 74
  • 142