SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    footer positioned to bottom, content 100% height

    Please take a look here:
    http://jsfiddle.net/anyEC/embedded/result/

    and here for the source:
    http://jsfiddle.net/anyEC/

    I'm trying to strech the google map in full height.
    But it doesn't work...
    Even if I set all divs to a height off 100%, it doesn't work.

    The only way to get the map visible is to set set a fixed px height.
    how can I get the google map stretch to the top of the footer??

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi jimmyjoy. Welcome to the forums.

    Even if I set all divs to a height off 100%, it doesn't work.
    Yeah, that doesn't work in CSS, I'm afraid. This is tricky, but perhaps our resident experts @Paul O'B and @Rayzur might have a solution. I'm thinking tables or display: table, but not sure. There's more to it that just that.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This relies on a fixed height header and footer and uses the sticky footer routine from the CSS faq.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Sticky Footer at Bottom</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
                google.load("maps", "3", {
                    other_params: "sensor=false"
                });
            </script>
    <script type="text/javascript">
            var map;
            var starting_lat = 0;
            var starting_lon = -30;
            var starting_zoom = 3;
    
            function initialize() {
                var myOptions = {
                    center: new google.maps.LatLng(starting_lat, starting_lon),
                    zoom: starting_zoom,
                    disableDefaultUI: true,
                    zoomControl: true,
                    zoomControlOptions: {
                      position: google.maps.ControlPosition.RIGHT_CENTER
                    },
                    mapTypeId: google.maps.MapTypeId.HYBRID
                };
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            }
    </script>
    <style type="text/css">
    html, body {
    	height:100%;/* needed to base 100% height on something known*/
    	text-align:center;
    	margin:0;
    	padding:0;
    }
    body {
    	background:gray;
    	font-family:arial, sans-serif;
    	color:#666;
    }
    #wrapper {
    	position:relative; /* needed for footer positioning*/
    	background:#f0f0f0;
    	min-height:100%; /* real browsers */
    }
    * html #wrapper { height:100% }
    #wrapper {
    	margin:0 auto; /* center, not in IE5 */
    	min-width: 1000px;
    	max-width: 1600px;
    	min-height:100%;
    	margin-top:-56px;/*footer height - this drags the outer 40px up through the top of the monitor */
    	text-align:left;
    	clear:both;
    }
    * html #outer { height:100% }
    #header {
    	padding:15px 1em;
    	border-bottom:6px double gray;
    	height:84px;
    	border-top:56px solid #fff; /* soak up negative margin and allows header to start at top of page*/
    }
    #footer {/* footer now sits at bottom of window*/
    	margin:auto;
    	height:40px;/* must match negative margin of #outer */
    	clear:both;
    	background:#ddd;
    	border-top:6px double gray;
    	height: 50px;
    }
    /*Opera Fix*/
    body:before {
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;/* negate effect of float*/
    }
    h1, h2, p {
    	padding:0 10px;
    	margin:0 0 1em
    }
    #wrapper:after {/*instead of using display table for ie8*/
    	clear:both;
    	display:block;
    	height:1%;
    	content:" ";
    }
    #map_canvas {
    	left: 380px;
    	right: 200px;
    	position:absolute;
    	top:174px;
    	bottom:0;
    }
    #leftcolumn {
    	float: left;
    	width: 380px; /*Width of left column*/
    	background:#0F3;
    }
    #rightcolumn {
    	float: right;
    	width: 200px; /*Width of right column*/
    	background: #FDE95E;
    }
    </style>
    </head>
    <body onload="initialize()">
    <div id="wrapper">
    		<div id="header">
    				<h1>header</h1>
    		</div>
    		<div id="leftcolumn"> left column </div>
    		<div id="rightcolumn"> right column </div>
    		<div id="map_canvas"></div>
    </div>
    <div id="footer"> footer </div>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •