CODEWITHSUNDEEP
htmlcssweb
Jimmy
Jimmy

Reputation: 12487

Google map taking up entire height

This is the code I'm working from but I can't understand where I have gone wrong. The map should display in the full height between the header and footer but it appears that it actually extends underneath the header and footer. This is a problem because it covers up googles copyright info and part of the controls.

http://jsfiddle.net/GFcBU/9/

Can anyone show me where I have gone wrong?

html, body, #container { height: 100%; }
body { z-index:1; position:relative; }
body > #wrapper { height:100%; margin:0 auto; width:100%; }
body > #wrapper > #header { z-index:3; position:relative; height:45px; background:#ccc; }
body > #wrapper > #container { z-index:2; position:relative; height:auto; min-height:100%; background:#eee; margin-top:-45px; padding-top:45px; padding-bottom:25px; box-sizing:border-box; margin-bottom:-25px; }
body > #wrapper > #footer { height:25px; background:#333; color:#fff; z-index:3; position:relative; }

.left {float: left;}
.right {float: right;}

Upvotes: 1

Views: 110

Answers (1)

tnsingle
tnsingle

Reputation: 139

Please try the following:

body > #wrapper > #container { 
  z-index:2; 
  position:absolute; 
  top: 45px; 
  bottom: 0; 
  height:auto; 
  background:#eee; 
  box-sizing:border-box; 
  margin-bottom: 25px; 
  width: 100%;
}

body > #wrapper > #footer { 
  height:25px; 
  background:#333; 
  color:#fff; 
  z-index:3; 
  position:absolute; 
  bottom: 0; 
  width: 100% 
}

Here is the jFiddle: http://jsfiddle.net/G3Pxy/

For the container, I added position: absolute, top: 45px and bottom: 0. When the height is set to auto as you have it, it should take on the remaining height of the screen. The margin-bottom: 25px that you have left room for the footer. For the footer, I only added width: 100%. For some reason, the width of the footer didn't span the width of the screen, so I had to add that.

Upvotes: 1

Related Questions