Я пытаюсь скопировать веб-сайт http://touch.facebook.com,, где у них есть боковое меню, которое показывает, когда нажимается кнопка в верхнем меню.В основном трехпанельное расположение бокового меню (A), верхнего меню (B) и содержимого (C), как показано ниже:
__________________
| |______B_____|
| A | |
| | C |
| | |
|___|____________|
В моем HTML я называю A side_menu,B top_menu и C map_canvas.B и C в совокупности составляет content.В map_canvas я хотел разместить карту Google, которая охватывает весь экран (например, высота 100% и ширина 100%).Я хочу максимально растянуть карту, чтобы этот сайт хорошо просматривался на компьютере или мобильном устройстве.
В настоящее время мой CSS выглядит следующим образом:
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%;
}
Но'map_canvas' вообще не отображается.Я знаю, если я специально введу фиксированную высоту и ширину, то она появится, но я хочу растянуть ее до размеров экрана.Возможно ли это?
Вот 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>
Я также заметил, что после загрузки карты она добавляет собственный стиль:
<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>