How to make a Bootstrap column fill the remaining height

Although my content is short, I want the page to continue on with more information down the screen.

<div style="background: #e0e0e0;">
  <main role="main" class="container">
    <div class="row" style="background: #f9f9f9;">
      <div class="col mb-3">
        <h1 class="display-4 mt-5">{{object.name}}</h1>


        <p>City: New York</p>

        <div class="row mt-5">

          <table class="table">
            <thead>
              <tr>
                <th scope="col">Year</th>
                <th scope="col">Show</th>
              </tr>
            </thead>
            <tbody>
              {% for show in shows %}
              <tr>
                <th scope="row">2019</th>
                <td>Test Title</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>

        </div>
      </div>
    </div>
  </main>
</div>

https://i.sstatic.net/CCEZY.png

Answer №1

It is recommended to set the CSS property min-height: 100vh for the <main> element and the

<div style="background: #e0e0e0;"></div>
element

Answer №2

Consider using both min-height and max-height properties

.row{
min-height: 450px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div style="background: #e0e0e0;">
  <main role="main" class="container">
    <div class="row" style="background: #f9f9f9;">
      <div class="col mb-3">
        <h1 class="display-4 mt-5">{{object.name}}</h1>


        <p>City: New York</p>



        <div class="row mt-5">

          <table class="table">
            <thead>
              <tr>
                <th scope="col">Year</th>
                <th scope="col">Show</th>
              </tr>
            </thead>
            <tbody>
              {% for show in shows %}
              <tr>
                <th scope="row">2019</th>
                <td>Test Title</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>

        </div>
      </div>
    </div>
  </main>
</div>

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 could be causing the loss of my <textarea> information in the $_POST submission?

I have been working on a script that takes form data and displays it in a PDF or another printable format. There is a "New Line" button at the bottom of the form, which when clicked adds a new line to the form and stores the previous line's data in an ...

Next.js optimizes the page loading process by preloading every function on the page as soon as it loads, rather than waiting for them to

My functions are all loading onload three times instead of when they should be called. The most frustrating issue is with an onClick event of a button, where it is supposed to open a new page but instead opens multiple new pages in a loop. This creates a c ...

What is the best way to vertically align a label at a 270-degree angle?

I am trying to position text vertically at 270 degrees and in the middle of an image. This is my goal. Despite attempting to use the CSS 'transform' property, I have been unsuccessful. You can view the code I tried here. Below is the HTML and CS ...

The loading indicator is not appearing inside the designated box

I have successfully implemented a loader using jQuery and CSS to display a gray background during an AJAX call. However, I am encountering an issue where the loader and background are being displayed across the entire page instead of just within a specific ...

Enhance your photographic experience with the JavaScript Camera API on Android (Froyo

I have been attempting to utilize the JavaScript Camera API through the Android browser, as showcased at Google IO on Froyo. Despite having Froyo on my Nexus1, I am encountering difficulties accessing navigator.device and navigator.camera properties, bo ...

Center-align columns that are fewer in number than can fit in a row

Just starting out with Bootstrap My HTML structure looks like this: <div class="row"> <div class="col-lg-3"> First Column </div> <div class="col-lg-3"> Second Column </div> </div> Currently, there are ...

Utilize jQuery to find elements based on a specific attribute containing a certain value

I need help targeting specific attributes in links to append classes based on the file extension. My page displays various types of files, from images to .ppt files. I am using ASP.NET MVC and jQuery for this project. <a class="screenshot" title="" fil ...

"Enhance your ASP.NET site with a captivating background

I am currently working with C# in VS2005. My challenge is to add a background image to my login page, which is in the form of an .aspx file. Here is a screenshot of my current setup: Here is the code snippet for my background: <div align="center" ...

Using jQuery or Javascript to enclose every character in a given string with an HTML tag

I am trying to create a function that can take a string of text and wrap each letter within that string with an HTML tag such as <i> or <span>. Although I have made some progress, the current solution is not working as expected. The issue I a ...

CSS font attribute stylus variable

Can you help me troubleshoot this issue with the variable in stylus that is setting the font attribute using shorthand syntax? button-font = 100 16px Helvetica Neue', Helvetica, Arial, sans-serif I'm encountering the following error message: ...

Shapes and their corresponding encoded representations compiled in a comprehensive catalog

Can anyone provide me with a comprehensive list of HTML escaped codes for displaying various shapes on web pages? I need codes that are universally compatible with all browsers. For instance, I would like to display a square using an escaped code in one ...

Exploring the benefits of using Div and semantic elements in web

After spending more than two months learning HTML, I still find myself uncertain about the most practical coding approach. Despite knowing that it's important not to overthink it, I often wonder if I should stick with simplicity or add extra elements ...

Is there a way for me to receive user inputs, perform mathematical operations on them, and then display the result of the calculation? Additionally, is there a way to ensure that the output value automatically updates

As a newcomer to HTML and JavaScript, I'm unsure how to approach this task. Here is what I have so far: <div class="inputs"> <label for="#arena2v2">2v2 Arena Rating:&#9;</label><input class="pvp" type="number" step="1" m ...

Increase the width of the table beyond that of the container

I am struggling with adjusting the width of my table within a container. My goal is to make the table extend 20px beyond the container on both sides, but my attempts have been unsuccessful. I experimented with changing the margin: 0 auto; property on the ...

Implementing a Bootstrap bottom popover when an image is clicked using JavaScript

Does anyone know how to display a Bootstrap bottom pophover when an image button is clicked using JavaScript? Appreciate any help! ...

Error 410: The Webpage has Disappeared

Unfortunately, my website fell victim to a hacking attack that resulted in the addition of numerous unwanted pages. These pages were quickly indexed by Google, causing a significant drop in traffic. The names of these pages all follow a similar pattern, s ...

Use regular expressions to automatically generate HTML attributes in your styling

My ionic/angular app generates a custom tag element with a unique _ngcontent attribute on each refresh, like so: <tag _ngcontent-hgr-c2>...</tag> (1st refresh) <tag _ngcontent-agj-c7>...</tag> (2nd refresh) <tag _ngcontent-cfx-c5 ...

Fixed Row Feature in Visual Composer

Currently, as I work on a website in Wordpress utilizing the Visual Composer page builder, I have encountered a dilemma. I am attempting to ensure a row remains sticky at the top of the page. In an effort to achieve this, I have inserted the following CSS ...

Ensure that the corner ribbon remains in place on the pricing table by making

Looking to enhance the functionality of a price table that features a corner ribbon? Currently, there is a hover effect on the price table that displaces the corner ribbon. Check out the code snippet below. The goal is to keep the corner ribbon sticky when ...

Tips for enabling the background div to scroll while the modal is being displayed

When the shadow view modal pops up, I still want my background div to remain scrollable. Is there a way to achieve this? .main-wrapper { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; height: 100%; overflow-x: hidden; ...