CSS best practices
If your code uses a map, or another element that has no fixed height, you must give it an explicit height, such as 400px vs 50%.
Use 100% as the value width so that the page and layout can manage the width that the portlet uses. For height, choose a reasonable value. For example:
#map-canvas {
height: 400px;
width: 100%;
}
vs
#map-canvas {
height: 50%;
width: 100%;
}
If the script uses styles with absolute positions, such as position: absolute;, consider chossing relative positions instead, such as position: relative;. Otherwise, the item is likely positioned outside of the portlet space.