How can I make the main div contain all content between the header and footer in jQuery mobile?

This specific html code was created utilizing jQuery mobile.

<div data-role="page" id="map-page">
<div data-role="header" data-theme="a" data-position="fixed"
    data-fullscreen="true" data-tap-toggle="false">
    <h1>header</h1>
</div>

<div data-role="main" class="ui-content" id="map_canvas">
    <div id="map"></div>
</div>

<div data-role="footer" data-theme="a" data-position="fixed"
    data-fullscreen="true" data-tap-toggle="false">
    <h1>footer</h1>
</div>

The google map is represented by the id=map, and also this includes CSS styles.

<style>
    #map-page{
        width: 100%;
        height: 100%;
        padding: 0;
    }
    #map-canvas{
        position: relative;
        overflow: hidden;
        min-height:100%;
        height:auto !important;
    }
    #map{
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
    }
</style>

In the current setup, the google map fills all the space below the header and above the footer. The result is that the top and bottom of the map are partly obscured by the header and footer. Ideally, I would like the map to only cover the remaining area between the header and footer. Any suggestions on how to achieve this?

Appreciate any assistance.

Answer №1

It's unnecessary to specify fixed positioning for the header and footer.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div data-role="main" class="ui-content">
   <div id="map" style="width:400px;height:400px;"></div>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div>

</body>
<script>
function myMap() {
var mapOptions = {
    center: new google.maps.LatLng(51.5, -0.12),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</html>

Answer №2

I just completed a project using percentage calculations to achieve the desired result. Below is the code I used:

#map-page{
        width: 100%;
        height: 100%;
        padding: 0;
    }
    #header, #footer{
        height: 6%;
        text-align: center;
        margin: 0;
    }
    #main{
        position: absolute;
        top: 6%;
        height: 88%;
        width: 100%;
    }
    #map{
        position: absolute;
        height: 100%;
        width: 100%;
    }

It met my requirements, but I'm sure there are more elegant solutions out there by talented developers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to improve the transition of a <video> background using CSS

My webpage features a unique 10-second video wallpaper achieved using only pure CSS. Below is the code I used: <style> video#bgvid { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; he ...

Avoid clicking on links while the webpage is still loading

I am facing an issue with my website where I need to intercept link-clicking events using jQuery. Everything works fine, but there is a problem if a user clicks on a link before JavaScript finishes loading, causing it to redirect to another page in error. ...

Don't forget to expand or collapse

I'm struggling to make this work. My goal is to initially display 50 characters and show the rest when the "read more" button is clicked, and vice versa with "read less." Another problem I've noticed is that when I click the back browser button, ...

Using jQuery functions on inputs within a Bootstrap Modal

I've encountered an issue with my jQuery functions that validate input fields based on a regex pattern. Everything works smoothly when the form is displayed on a regular page, but as soon as I try to implement it within a Bootstrap Modal, the validati ...

Showcasing images in Flask

Hello everyone, I am encountering an issue with displaying images in my HTML file. Currently, I am using Flask within Visual Studio Code and here is the code snippet that I want to display: <img src="/templates/WANG_CHONG_st_1.png" width=" ...

Generate a list of files and transfer them to an input file

I am currently working on creating a drag and drop area where I can retrieve dataTransfer items using webkitGetAsEntry, and then differentiate between directories and files. My goal is to convert these files into a FileList and transfer them to a file inp ...

What is the best way to add a `<div>` before or after a specific `<p>` element based on the client's height?

I am facing an issue with inserting a div before a paragraph element based on the given clientHeight. Specifically, I need to locate the closest paragraph element from the specified clientHeight and then add a div before or after that particular element. ...

After the scaffold generator, the Twitter-bootstrap buttons now feature text in a subtle gray

I seem to be facing a similar issue to what was discussed in this thread about Twitter Bootstrap displaying buttons with greyed text. The problem I am encountering is with a btn-info button that has a dropdown - after clicking on an item in the dropdown, t ...

bootstrap for building responsive websites

I am trying to modify the width of an input from 100% to 50%, and position it in the center of the page so that it remains responsive when resizing the browser window. <!DOCTYPE html> <html> <head> <title>test</title&g ...

Are there methods to individually style components that have been generated through the .map() function?

My goal is to style each <Tuner /> component separately, which are being rendered for each item in the this.state.notes array using this.state.notes.map(). I want to position them individually on the page, but currently they all appear together. This ...

What could be causing the second image to not drop in the proper position in an HTML and JavaScript environment?

I am encountering an issue with a simple drag and drop implementation using images in my code. The first image works fine, but for some reason the second image does not display correctly when dragged inside the div boxes; it appears outside of the box. Can ...

What is the reason for the malfunction of this JavaScript code designed for a simple canvas operation?

I'm having trouble with the code below. It's supposed to display a black box on the screen, but for some reason it's not working properly. The page is titled Chatroom so at least that part seems to be correct... <html> <head> &l ...

What is the best way to create a border for the active class nav-item in Bootstrap 4?

I am facing an issue with changing styles in the nav-item. I have created a separate style sheet and added the necessary code to make the changes. Surprisingly, the changes are reflecting well in Internet Explorer but not in Firefox. Can anyone guide me on ...

Incorporate a new CSS class into a DIV using JavaScript

Sample HTML: <div id="bar" class="style_one"></div> Is there a way to include the class style_two without deleting style_one? final outcome: <div id="bar" class="style_one style_two"></div> ...

Issue with confirming deletion of tabulated records

HTML Code: <td>random_data_1</td><td><button id="random_data_1"></button></td> <td>random_data_2</td><td><button id="random_data_2"></button></td> <td>random_data_3</td ...

I need to figure out how to nest a div inside of a ul-li-a and ensure that the text inside the

In my search button, I have a cached list of options. When I select one, it should trigger the menu and choose the correct option. However, I am having trouble comparing the innerText of a div with the selected option from the search area. Both a and div e ...

The Hidden Div containing NicEdit is now shrunk down to a smaller size

Attempting to integrate the NicEdit editor for a hidden textarea stored within a div has presented some challenges. The goal is for the targeted textarea's parent div to be revealed upon the user clicking a button, with the textarea's width set t ...

What is the best way to prevent certain bootstrap classes from being applied across all elements?

After testing my HTML and CSS code on my local computer, it looks perfect. However, when I upload it to a server, the appearance changes. You can see it in action here: . The issue seems to be related to some bootstrap classes being activated differently ...

"Changing the location of the suffix icon in an ant datepicker: step-by-step

Is there a way to relocate the calendar icon without using flex-flow:row-reverse? I'm open to exploring alternative methods. ...

Replace the css variables provided by the Angular library with custom ones

Having an angular library with a defined set of css variables for colors applied to components, which are globally set like this: :root { -color-1: #000000; -color-2: #ffffff; ... } In my application utilizing this library, I need to override ...