Tips for expanding a Bootstrap component to fill the rest of the available space excluding the navigation bar

I am attempting to ensure that the #output element fills the remaining space on the page, considering the presence of a navbar. Many solutions online recommend using min-height: 100vh, but this does not account for the navbar (borrowed from Bootstrap's website).

The desired outcome is to have the <nav> and the .container occupy the upper portion of the screen, with the #output occupying the remainder of the container space not allocated to the <img> and <div>, all without overflow.

Please refer to the JSFiddle link for reference: https://jsfiddle.net/Lfyh2bz9/1/

(Note: I am aware that it would be best practice to move style-related information into a separate CSS file, but my primary focus is getting it functional first :) )

How would you approach this? Would you designate the <nav> as a .container and utilize flexbox? Convert the .container measurements to rem units like the <nav>? Or perhaps calculate the remaining height dynamically using CSS?

Thank you in advance, --J.

Edit: Alternatively, setting the container items to 25%-50%-25% widths (OR making the output area equivalent to 3 lines) could serve as a viable solution, provided it remains proportional within the container!

cssbootstrap-4

Answer №1

Did you achieve what you were aiming for? - codepen (only a few CSS lines added, no changes in HTML)

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar Title</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Page 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Page 2</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container-fluid d-flex flex-grow-1 flex-column" style="background: gray;">
  <div id="output" class="row d-flex flex-grow-1 justify-content-center text-center">
    <div>Adjust This Part To Fit Height Without Navbar And Remaining Content</div>
  </div>

  <div class="row d-flex justify-content-center">
    <img src="https://via.placeholder.com/381x298/O">
  </div>
  <div class="row d-flex justify-content-center">
    <button type="button" class="btn btn-dark col-4" onclick="">Option 1</button>
    <button type="button" class="btn btn-light col-4" onclick="">Option 2</button>
  </div>

</div>

<style>
body {
  /* Expand body to fill the page height */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>

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

Avoid placing dropdown items within the navbar container in Bootstrap 4

When collapsing the screen, I encountered an issue with the dropdown items being inside the navbar. I positioned the dropdown menu as absolute, but some items were getting cut off, and I didn't want the scroll bar to appear. Despite trying to use medi ...

htmlcssbootstrap-4

The function will not be triggered when the form is submitted

I've set up this form to send data to the server-side. It's built in HTML/CSS with AngularJS as well. I made sure that the button is placed inside the form, a common mistake that can cause issues. However, despite my efforts, the function "onAddE ...

javascripthtmlcssangularjsweb

Activate dropdown menu link when tapped twice on tablet devices

I am trying to implement a dropdown navigation link feature on tablets where the child menu div drops down only on the second click. This functionality already works on iPads, but on Android and Windows tablets, the link is triggered at the same time as th ...

javascriptandroidjqueryhtmlcss

Connect different CSS variables within a related context

Looking to incorporate Font Awesome 5.10.2 Duotone icons easily into any HTML element. The icon element relies on HTML attributes that should correspond to a specific icon, with the mapping controlled by the CSS author. <x pay></x> <!-- Th ...

csspseudo-elementcss-variables

"Can you provide instructions on how to set the background to the selected button

How can I change the background color of a selected button in this menu? Here is the code for the menu: <ul id="menu"> <li class="current_page_item"><a class="button" id="showdiv1"><span>Homepage</span></a></ ...

javascriptjqueryhtmlcss

Ways to improve the quality of a blurred photo

I've recently put together a test landing page using bootstrap: Upon visiting the site and viewing the iPhone screenshot, it's clear that the text on the screen is quite blurry. Interestingly, by simply resizing the browser window and then maxi ...

csshtmlimagetwitter-bootstrapgif

What is the best way to center align all elements using a wrapper in CSS grid?

I am working on designing a layout that looks like this: https://i.sstatic.net/jAaXL.jpg I have set the wrapper as a class and aim to center everything on the screen. Aside from the wrapper, I also want to make the text and form equal sizes. Here is th ...

htmlcsscss-grid

Difficulty resizing background image on iPhone

I am having an issue with the background image resizing correctly on my website, specifically on iPhone (I have not yet checked iPad). You can view the site here. The dimensions of the image are 1393 x 1098 pixels. Below is the CSS code I am currently us ...

iphoneioscss

Utilizing JavaScript for parallax horizontal scrolling (identifying optimal 50% of screen)

I have successfully implemented this code for vertical scrolling: $('.flapleftclass').css('top',(0+(scrolled*0.5))+'px'); This method works well because I am referencing to the top position. However, when it comes to horizon ...

javascripthtmlcsswebparallax

Tips for using jQuery to add or append a class to the final li element

I am currently struggling to understand why the last child of the li element is not being inserted into the last li. This module functions as a treeview, and my main objective is to add a class to the last li. Let me demonstrate with some sample code and ...

htmljquerycsslaravel

Having trouble getting CSS Animation to work in a React project?

I am currently developing a Next.js application using React. const partyButton = useRef(null) const handleParty = () => { setTimeout(() => { partyButton.current.classList.add('party-time'); console.log(party ...

javascriptcssreactjsnext.jsreact-hooks

Utilize a fresh font style and replace the font family components in @mui/material with the new

Looking to bring in a fresh font family stored in a fonts directory and replace the existing mui base font family. import { responsiveFontSizes, createTheme } from '@mui/material'; import NEWFONTFAMILLY from '../fonts/something.otf' c ...

cssfontsmaterial-uifont-family

Why isn't the card positioned in the center of the screen?

Why is the card not centered on the screen as it is supposed to be? I am utilizing Bootstrap 4.5 <div class="container"> <div class="row"> <div class"col"></div> <div class="col-8"> <div class="card"> ...

htmlcssbootstrap-4

Embeddable javascript code can be enhanced by incorporating references into the header

I have developed a basic calculator application using HTML, JavaScript, JQuery, and CSS. My intention is to allow others to embed this calculator app on their own web pages by utilizing a file named generate.js. Within this file, there are several documen ...

javascriptjqueryhtmlcss

Outlook fails to recognize table cell widths when there is an image present

Although this question has been asked previously, the solutions provided did not solve my issue. I am trying to set the width of the <td> element to 70%, but when I insert an image it is affecting the widths of received emails in Outlook (I use MS O ...

htmlcsshtml-tableoutlookhtml-email

JavaScript code is functioning properly on Chrome and Internet Explorer, however, it may not be working on FireFox

Despite searching through the console, I am unable to find a solution to this issue. There are two images in play here - one is supposed to appear at specific coordinates while the other should follow the mouse cursor. However, the image intended to track ...

javascriptcsshtml

Properly Positioning Text within React's Material UI Components

I am encountering a simple issue where I am trying to align '01/01/2020' with 'A00002'. To view my code on CodeSandbox, please visit CLICK HERE <div className={classes.root}> <Typography variant="h6" className={cla ...

cssreactjsmaterial-uijss

Ways to achieve a blurred background effect on the body using CSS

I've been experimenting with setting a background color using linear gradient, but now I want to add a blur effect to it. I've tried various codes but haven't had any success so far. Here is the CSS code I have been working on: body{ ...

css

Ways to deactivate text box and link

In my table, users can add rows with each row being numbered. Before adding any rows, the user must enter a number in a textbox indicating how many rows they want to add. Once that number is reached, no more rows can be added. if (qnum >= <?php echo ...

htmlcss

Scroll through content using buttons in JavaScript can be utilized repeatedly as needed

I want to showcase a collection of movies on my website through a horizontal, scrollable div. Since I disabled the scrollbar, users can no longer scroll, leading me to incorporate two buttons - one for moving right and one for moving left. However, the i ...

javascriptjqueryhtmlcss