I am attempting to split the screen where 80% is dedicated to displaying a Google map at the bottom, and the remaining 20% displays content in a div with the ID '#data' at the top. However, the code below does not seem to achieve this layout as intended. The adjustments I made are indicated by ** and enclosed in **
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
**#map-canvas { height: 80% }
#data { height: 20% }**
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
**<div id="data"/>**
<div id="map-canvas"/>
</body>
</html>
Any suggestions or solutions for achieving this layout?