Achieving a Customized Header and Footer in Bootstrap 4 Alongside Immersive Google Maps Display with Full Screen Height

I'm facing some challenges while developing a webpage with Bootstrap 4.1. I am working on incorporating a header, Google map that fills the entire content area, and a footer below the map.

---------------------------------------------------------------------
|                             Header                                |
---------------------------------------------------------------------
|                             Content                               |
|                              (map)                                |
|                                                                   |
|                                                                   |
|                                                                   |
|                                                                   |
---------------------------------------------------------------------
|                             Footer                                |
---------------------------------------------------------------------

At the moment, I am struggling to make everything fit properly on the screen. The footer is causing the page to display a scrollbar as it goes off the visible area. Is there a way to adjust the map so it fits perfectly between the header and footer?

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#map-canvas {
  width: 100%;
  height: 100%;
}

You can view my current progress in this jsfiddle link: https://jsfiddle.net/11n0n6u1/1/

htmlcssbootstrap-4

Answer №1

I've contained the entire content within a div, which is styled with the classes: 

d-flex flex-column justify-content-between fullHeight
.
The purpose of the fullHeight class is to set the height of the div to 100vh.
This setup creates a flex container that allows the map to occupy all available space between the header and footer.

You can view the updated code on my latest fiddle: https://jsfiddle.net/od5jrfau/

Answer №2

Your code has been successfully updated!

New linkhttps://jsfiddle.net/qgah75x2/

Quick summary: Adjust the height of the header and footer, then calculate the map height as 100% - heightofheader - heightoffooter.

Alternatively, you can set the header and footer heights to be 5%/5vh and the map height to be 90%/90vh.

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

What steps can be taken to ensure that the content in column two does not impact the positioning of content in column one?

Is there a way for the input text container to remain in its original position within the layout even after submitting text? Usually, when the data displayed container's height increases, it pushes the input text container down. Despite trying absolu ...

htmlcssbootstrap-5

What could be the reason for the incorrect usage of the "this" value in the jQuery hover event listener when using bind(this)?

Here is an example to consider: function dropDownToggle() { console.log($(this)[0].id); } $("a").hover( dropDownToggle.bind(this) ); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a id= ...

javascripthtmljquery

What is the best way to style a tooltip in an ASP.NET application using CSS?

protected void grd_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { foreach (TableCell cell in e.Row.Cells) { ...

javascriptjquerycssasp.net

Woocommerce - [product_categories] shortcode - Can I exclude specific categories from being displayed in the list?

Is there a way to hide specific categories (only two in this case) that are displayed using the [product_categories] shortcode? I have attempted to place these categories at the bottom of the list and used CSS to target them: .home .woocommerce ul.product ...

csswordpresswoocommercecategories

Incorporate JavaScript code into an Angular UI-Router view

I can't seem to find an answer to this question anywhere, so I'm hoping someone here can help me out. In my AngularJS app, I am using ui-router to load multiple views into the same <ui-view> element. I am trying to implement Jquery UI&apos ...

javascripthtmlangularjsjquery-uiangular-ui-router

Enhancing React Flow to provide updated selection and hover functionality

After diving into react flow, I found it to be quite user-friendly. However, I've hit a roadblock while attempting to update the styles of a selected node. My current workaround involves using useState to modify the style object for a specific Id. Is ...

javascriptcssreactjstypescript

Switching colors on SVG when hovering

When I hover over the code below, I want both eyes and eyebrows to change color. I've managed to get it working for the left eye, but not the right eye. Additionally, the fill on the right eyebrow looks strange when hovered over. I suspect this issue ...

csssvghover

Arranging images in a row with the help of :before and :after styling

Looking to use the pseudo selectors :before and :after to create a border around a div with images, but running into some issues. The :after image is not positioning correctly on the right side of the element and the text is dropping below the image. Check ...

htmlcss

Is there a way to submit HTML form data using the action attribute without triggering a redirection to a different page?

I am currently working with Angular and Plaid. My goal is to submit a form that sends the public_token to /authenticate using the 'action' attribute in the HTML form. How can I achieve this without being redirected to another page? Step 2: Easy ...

javascripthtmlangularjsplaid

Surprising behavior of translateZ in Framer Motion

Trying to position elements in a circular layout has led to unexpected behavior when using framer motion's translateZ. By applying styles with a template literal without shorthand for transforms, the desired effect is achieved: transform: ` rotateY( ...

cssreactjsframer-motion

What is the best way to include more than two conditions in my code? For example, using if, if, else

<!DOCTYPE html> <html> <head> <title>efgh</title> </head> <body> <p id="result"></p> <button onclick="verifyInput()">check input</button> <script> function ver ...

javascripthtmlif-statement

Is there a way to add a <video> tag in tinymce editor without it being switched to an <img /> tag?

I am attempting to include a <video> tag within the tinymce editor, but it keeps changing it to an <img> tag. Is there a way to prevent this conversion and keep the <video> tag intact? I want to enable videos to play inside tinymce whil ...

javascripthtmltinymce-4

Is it possible to create several XMLHttpRequests for various <li> elements upon clicking on them individually?

Today, I was experimenting with XMLHttpRequest to fetch news headlines from 10 different countries using the NewsAPI. I created 10 <li> tags for each country and assigned them an onclick function that triggers a JavaScript function to append the coun ...

javascripthtmlajaxxmlhttprequest

Clashing CSS Styles: Font Size Edition

Can someone explain how CSS font sizes work? I set a specific line to be 200% font size, but changing the body font size affected it. Shouldn't the line maintain its specified size? When the body font size is changed from 12pt to 8pt, the line "There ...

cssfontssize

"Creating a sleek and streamlined navigation bar in Bootstrap-4 without

<ul class="nav navbar-nav"> <li class="nav-item-dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false> SLIDES ...

htmltwitter-bootstrapbootstrap-4

Animate in Css3 before the object enters the user's view

Currently, I am utilizing CSS3 animate it from Despite following their instructions, the children within the animation activate prior to entering the viewport. Is this a common issue or is there a specific meta tag required? Your assistance is greatly ap ...

javascriptcsscss-animations

I ran into an issue trying to modify the color and thickness of the divider line in MaterialUI

Check out my code on codesandbox here. I'm trying to adjust the line thickness and color of the separator in my MaterialUI project, but I'm having trouble getting it to work. I've looked at a few examples, but nothing seems to be working for ...

javascriptcssreactjsmaterial-ui

CSS DROP DOWN NAVIGATION MENU - Struggling to maintain hover effect on main menu item while navigating through sub-menu

I am facing a challenge with a CSS-only drop-down menu where the top main menu item loses its highlight when I move the cursor over the sub-menu items. You can view the menu in action here: . For example, if you hover over "Kids" and then move your cursor ...

css

Easily integrate an HTML form as an input for your Python script

Despite my thorough searches, I haven't been able to find a satisfactory answer. I am creating a local HTML page with Python and would like to extract data from a form on that page, use it as input for a Python script, and then properly display the r ...

javascripthtmlpython-2.7

Steps to update the border color to red when a button is clicked

I have an interesting question regarding validation and forms. I decided to use my own class, but I noticed that when the button is clicked, the border color does not display anymore. I tried testing with CSS for invalid entries, and it worked. Now, I wan ...

javascripthtmljquerycss