How can I adjust the height of a div to fit between a fixed navbar at the top and a pinned footer at the bottom?

Question

How can I adjust the height of a div to fit between a fixed navbar at the top and a pinned footer at the bottom?

I am facing a challenge with a div containing a Bing map that needs to stretch to fill the entire height of the page. While I have successfully used container-fluid for the width, adjusting the height is proving tricky due to the fixed heights of the navbar and footer elements. Changing the window height can sometimes result in the map being partially covered by the footer or navbar, especially if the width changes causing line breaks in the text.

The navbar is located at the top of the page while the footer is pinned to the bottom. I aim to prevent the appearance of scrollbars and anchor the map div between the navbar and footer. Is there a method to maintain a consistent distance of, let's say, 10px from the element above and below? This would allow the map to expand or shrink accordingly.

Any tips on achieving this using Bootstrap and/or CSS?

html css asp.net asp.net-mvc bootstrap-4

Answer 1

Answer №1

Here is a potential solution

/* Example Code */
body {
   margin: 0;
   height: 100%;
}

#wrapper {
   display: grid;
   grid-template-rows: 30px 1fr 30px;
}

#content {
  height:auto  /* or overflow-y: scroll; for fixed header and footer */
}

/* Additional Styling */
#wrapper {
   gap: 1px;
   height: 100%;
   border: 1px solid black;
   background-color: black;
}

#wrapper > * {
   padding: 5px;
   background-color: white;
}

/* For demonstration purposes only */
/* Adjust height as needed */
#header {
  background-color:green;
}
#footer {
  background-color:blue;
}

<body>
   <div id="wrapper">
      <div id="header">Header Content</div>
      <div id="content">
         This is placeholder text
      </div>
      <div id="footer">Footer Content</div>
   </div>
</body>

Answer 2

Here is a potential solution

/* Example Code */
body {
   margin: 0;
   height: 100%;
}

#wrapper {
   display: grid;
   grid-template-rows: 30px 1fr 30px;
}

#content {
  height:auto  /* or overflow-y: scroll; for fixed header and footer */
}

/* Additional Styling */
#wrapper {
   gap: 1px;
   height: 100%;
   border: 1px solid black;
   background-color: black;
}

#wrapper > * {
   padding: 5px;
   background-color: white;
}

/* For demonstration purposes only */
/* Adjust height as needed */
#header {
  background-color:green;
}
#footer {
  background-color:blue;
}

<body>
   <div id="wrapper">
      <div id="header">Header Content</div>
      <div id="content">
         This is placeholder text
      </div>
      <div id="footer">Footer Content</div>
   </div>
</body>

How can I adjust the height of a div to fit between a fixed navbar at the top and a pinned footer at the bottom?

Answer №1

Similar questions

I require displaying the initial three letters of the term "basketball" and then adding dots

The central navigation system of the Owl Carousel

What is the CSS/HTML code to position text at the bottom of an image overlay in a card design?

Accessing express checkout and onsite features through paypal integration

Executing a for loop within a foreach loop in PHP

Looking at an HTML string in its natural HTML form

Mobile devices have a fixed distance and center alignment on the horizontal timeline

Developing an Addon for Firefox using XUL and JavaScript

Retrieve information from an external JSON file and present it in a table format - Obtain the most recent data available

The flexbox row in Bootstrap stays intact in Firefox instead of breaking to a new line

The issue of ASP.NET with handling incomplete HTTP requests

Struggling to display text content from an array onto the HTML webpage

What steps can be taken to reduce the size of the cards in ant.design?

Sending loop data as a parameter from JavaScript to AJAX through a Bootstrap modal

Concealing a Specific Element with Text using jQuery

How can I enable the "edit" function for a button within a list item?

There seems to be a column in the MySQL INSERT query that is unidentifiable and does not exist in the list of fields

Issue encountered while attempting to run app.css file downloaded from Nativescript Playground

The radial gradient in d3.js does not properly affect paths

I am experiencing issues with my AJAX file and it seems to be