Google map fill page remaining beneath header

Question

I'm trying to make a header div appear above a Google map, but have the map fill all of the rest of the page content.

The trouble I have is that the page keeps scrolling and I don't want it to. It scrolls the same amount as the header height. I tried putting overflow: hidden but that doesn't work because although it no longer scrolls it also doesn't show the google logo and legal stuff that is required.

This is my html:

<body>
  <header>Title</header>
  <div id="appcontent">
      <div id="map-canvas"></div>
  </div>
</body>

and CSS:

html, body {
  margin: 0px;
  width: 100%;
  height: 100%;
}
#appcontent {
  width: 100%;
  height: 100%;
}
#map-canvas {
  width: 100%;
  height: 100%;
}
header {
  width: 100%;
  height: 40px;
  background-color: #CFCFCF;
}

I've made a Fiddle of what I'm trying to do here: http://jsfiddle.net/5LVQX/1/

Can anybody help me out with this?

canon · Accepted Answer · 2014-01-09T17:58:57.847

6

By using absolute positioning, like so (fiddle)

#map-canvas {
    position: absolute;
    top: 40px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
header {
    position: absolute;    
    top: 0px;
    left: 0px;
    right: 0px;    
    height: 40px;
    background-color: #CFCFCF;
}

See position: absolute.

edited Jan 09 '14 at 17:58

answered Jan 09 '14 at 14:13

canon

40,609
10
73
97

Goombah · Answer 2 · 2014-01-09T14:25:04.080

1

overflow: hidden

on

body

should also work.

Edit:

Will need

CSS

#appcontent {
  width: 100%;
  height: calc(100% - 40px);
  height: -webkit-calc(100% - 40px);
}

edited Jan 09 '14 at 14:25

answered Jan 09 '14 at 14:17

Goombah

2,835
2
12
22

1

this will hide some of the map the map area. – Ashish Kumar Jan 09 '14 at 14:18
1

_calc_ is something interesting. Just need to be aware about browser support, otherwise lovely! – Ashish Kumar Jan 09 '14 at 14:42
The first option conceals `40px` of the map and the second option only has support in more recent browser versions. Check out http://caniuse.com/calc. It's not nearly as universal as `position: absolute`. – canon Jan 09 '14 at 14:45
Yah I know, was making the best out of my dumb answer.. it was either that or deleting it. Now it's at least half an answer.. – Goombah Jan 09 '14 at 14:46

score -1 · Answer 3 · answered Jan 09 '14 at 14:15

-1

A quick solution is, add this JS line:

$("#appcontent").height($(document.body).height() - $("header").height());

jsfiddle: http://jsfiddle.net/5LVQX/3/

answered Jan 09 '14 at 14:15

Ashish Kumar

2,991
3
18
27

This question isn't tagged with [tag:javascript] or [tag:jquery]. – canon Jan 09 '14 at 14:20
Thanks for telling me, I never knew that! But as _jQuery_ is being used there, no harm in adding one more line there. – Ashish Kumar Jan 09 '14 at 14:21
Apart from unnecessary scripting to handle a display concern. Additionally, the map won't resize with the window in this implementation. To fix that, you'd need to add _more_ script to handle `window.onresize`. – canon Jan 09 '14 at 14:23

Google map fill page remaining beneath header

3 Answers3

Linked