header + sidebar (half page / full height) + google map (half page / full height)

Question

I'm trying to do a template with a

In the jsfiddle, is difficult to see the details, but gives me a scrollbar in the side of the browser which I don't want. Besides, the Sidebar is 40px higher (the header's height) than what's supposed to be. And the google map doesn't reach the bottom. So, even though it has height 100%, it's shorter.

I tried to put them in a container, and managed to make it work with a floating header, but it was cutting off the top of the sidebar and the map, which is not ideal.

http://jsfiddle.net/sebababi/TW4uQ/1/

  html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    max-height:100%;
  }
  #map-canvas {
    height: 90%;
    margin: 0px;
    padding: 0px
    float:left;
  }
  #sidebar{
  background-color:grey;
  width:50%;
  height:100%;
  float:left;
  }
  #header{
  background-color:green;
  width:100%;
  height:40px;
  }

<div id="header">header</div>
<div id="sidebar">sidebar</div>
<div id="map-canvas"></div>

Any ideas?

Shouldn't you need some level of scrolling for when the content exceeds the viewport height? — ravb79, Mar 04 '14 at 14:33

ravb79 · Accepted Answer · 2014-03-04T14:51:55.190

1

    <div id="page">
    <div id="header">
    <div id="nav">nav</div>
    </div><!-- header -->
    <div id="main">
    <div id="sidebar">sb</div>
    <div id="map">map</div>
    </div><!-- main -->
    </div><!-- page -->

  html, body {
   height:100%;
   width:100%;
   padding:0;
   margin:0;
}
#page {
  display:table;
  border-spacing:0;
  width:100%;
  height:100%;
}
#header {
  display:table-row;
}
#main {
  display:table-row;
  position:relative;
}
#nav {
  background:green;
  width:100%;
  position:absolute;
  left:0;
  right:0;
  height:40px;
}
#sidebar, #map-canvas {
  display:table-cell;
  width:50%;
  bottom:0;
  position:absolute;   
  top:40px;
}
#sidebar {
  background:blue;
   left:0;

}
#map-canvas {
    overflow:hidden;
    right:0;
}

http://jsfiddle.net/XB5Lp/1/

edited Mar 04 '14 at 14:51

answered Mar 04 '14 at 14:40

ravb79

722
5
8

o ffs. What are the rules for posting code on SO again? – ravb79 Mar 04 '14 at 14:41
Thanks, that worked perfectly. I didn't know you could use display:table. – Sebastian Mar 04 '14 at 14:50
Yeah, it works for >=IE8 and all. Also, you could check out the updated version. – ravb79 Mar 04 '14 at 14:52
I've been trying to integrate it with bootstrap, but I realised it doesn't adapt to small screens (iPhone). The display: table keeps it as a table. I tried with Float:left; but ended up with my original issue. – Sebastian Mar 04 '14 at 22:55
Change the display table-cell to block via the corresponding media query. – ravb79 Mar 04 '14 at 23:13
Cool, thanks, found this which explains how: http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries – Sebastian Mar 05 '14 at 08:35
as you mentioned at the begining, I need some level of scrolling. And I don't manage to do so. It worked before, but now since the sidebar is absolute, the inner scrolling doesn't work. I updated your jsFiddle: http://jsfiddle.net/sebababi/XB5Lp/2/ – Sebastian Mar 05 '14 at 13:44
overflow-y:auto on #sidebar. – ravb79 Mar 05 '14 at 14:06
sorry to bother you again, I was trying to have the scrollbar hidden. Like in here: http://jsfiddle.net/sebababi/NLMuk/1/ but inside your new absolute sidebar: http://jsfiddle.net/sebababi/XB5Lp/3/ – Sebastian Mar 05 '14 at 14:29
I'm afraid I don't understand. Isn't this what you want: http://jsfiddle.net/ZetvJ/1/ ? – ravb79 Mar 05 '14 at 15:09
yes, but without the scrolling. Like I did here: http://jsfiddle.net/sebababi/NLMuk/1/ but I don't manage to do it inside your sidebar (because it's absolute). – Sebastian Mar 05 '14 at 15:31
I found a dirty way to do so, http://jsfiddle.net/sebababi/ZetvJ/3/ (I just increased the size of the map_canvas to 52%, so it covers the scrolling ;o) thanks a lot for your help. – Sebastian Mar 05 '14 at 15:56
I would advise you not to use a "dirty" way. Am I correct when I say you'd like to allow scrolling but want to hide the scroll bar? – ravb79 Mar 05 '14 at 16:16
Well, the overflow-y:auto should hide the scrollbar when the maximum allowed height isn't exceeded. If you want to hide the scrollbar when the content does overflow (not recommended), you could get away with a right padding and negative right margin of about 22px on the sidebar with overflow-x:hidden. Maybe add an extra container for more control. You could also check into as less obtrusive, JS based, scrollbar solution as on http://jscrollpane.kelvinluck.com/ (requires reading and setting height) – ravb79 Mar 05 '14 at 21:11
I tried the padding and margin, and worked perfectly in jsfiddle. but in my bootstrap for some reason it pads towards inside. so it doesn't work. Why is the 52% width worse than the padding? – Sebastian Mar 05 '14 at 22:03
Just personal preference, I guess. I'd be pissed off to no end if I intended it for to be 50/50 and had to settle for something other than that. (: – ravb79 Mar 05 '14 at 22:36
I understand, I don't like it either, but the other solution doesn't work with bootstrap. Actually, I tried the media query, and changing it to block or inline doesn't work. Thanks a lot for your help. http://stackoverflow.com/questions/22219612/media-query-responsive-css-diplay-table-to-block-or-inline-disappearing-with-sm – Sebastian Mar 06 '14 at 09:05
I get this error ReferenceError: google is not defined – Rafael Jul 04 '17 at 08:06

score 0 · Answer 2 · answered Mar 04 '14 at 14:39

0

Try to use some kind of wrapper ? also the sidebar is longer becourse its 100% and the canvas is 90%.

When using a wrapper try overflow: hidden

answered Mar 04 '14 at 14:39

jurjen

73
9

header + sidebar (half page / full height) + google map (half page / full height)

2 Answers2