问题描述:

I'm trying to copy the website http://touch.facebook.com, where they have a side menu that shows when a button on the top menu is clicked. Basically a three-panel layout of a side menu (A), a top menu (B), and the content (C) as shown below:

__________________

| |______B_____|

| A | |

| | C |

| | |

|___|____________|

In my HTML I call A side_menu, B top_menu, and C map_canvas. B and C combined is content. In the map_canvas I wanted to put a Google map that spans out the entire screen (like height 100% and width 100%). I want to stretch the map as much as possible so that this site will be viewed nicely on a computer or a mobile device.

Currently my CSS looks like this:

body

{

font-family : sans-serif;

direction : ltr;

text-align : left;

line-height : 18px;

}

#side_menu

{

background : none repeat scroll 0 0 #32394A;

overflow : hidden;

position : absolute;

min-height : 100%;

width : 260px;

}

#content

{

left : 260px;

position : relative;

}

#top_menu

{

position : relative;

border-color : #111A33;

box-shadow : 0 1px 1px -1px #FFFFFF inset;

background-color : #385998;

height : 29px;

padding : 7px 5px;

}

#map_canvas

{

height : 100%;

width : 100%;

}

But the 'map_canvas' fails to appear at all. I know if I specifically enter a fixed height and width, then it will appear, but I want to stretch it out as far as the screen size. Is this possible?

Here is the HTML:

<!DOCTYPE html>

<html>

<head>

<link href = "common/css/main.css" rel = "stylesheet" type = "text/css"/>

</head>

<body>

<div id = "side_menu">Side Menu</div>

<div id = "content">

<div id = "top_menu">Top Menu</div>

<div id = "map_canvas"><!-- The Google map goes here --></div>

</div>

</body>

</html>

I've also noticed that after the map gets loaded, it adds some style of its own:

<div id="map_canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">

<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">

<!-- More Google map mumbo jumbo -->

</div>

</div>

网友答案:

You need to explicitly set the height and width of #content in your CSS, since the map_canvas div is a child of that element. Looks like you'll need to use either a combination of absolute and relative width/height, use margin offsets, or JS-based resizing to ensure that the map adjust to the full extent.

But I would start by verifying that setting the #content width and height works first (it should).

Kudos for incorporating the term "mumbo jumbo" into a StackOverflow question. :-)

相关阅读:
Top