Я хотел бы создать веб-страницу с верхним и нижним колонтитулами, левым столбцом (столбец шириной 25%, содержащий несколько кнопок и т. Д.) И областью основного содержимого, которая должна быть заполнена картой Google.
Я пытался изменить содержание из этого ответа следующим образом:
<body onload="initialize()">
<div id="wrapper">
<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="map_canvas"></div>
<div id="push"></div>
</div>
<div id="footer">footer</div>
html, body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
#wrapper {
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -100px;
background-color: red;
border: 1px solid black;
}
#header {
background: #438a48;
height:100px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 25%;
height:auto;
height:100%;
}
#map_canvas {
background: #000;
float: right;
width: 75%;
height:100%;
}
#footer, #push {
background: #df781c;
height:100px;
}
но высота параметра: 100%; at map_canvas и #leftcolumn заставляет содержимое превышать размер экрана, но если высота не указана, карта не может быть видна.
Кто-нибудь знает, как изменить / создать макет для того, чтобы автоматически заполнять область контента картой Google?
Спасибо!