A pale box located at the lower part of a screen

There seems to be a persistent white box at the bottom of my page/view that I can't seem to remove. Even when inspecting elements, there are no visible elements present in that space, not even within the body or html tags. I have attempted various solutions such as setting the body height to 100%, removing padding and margins, but unfortunately, none of these actions have made any difference. Apologies if the provided code is insufficient, please let me know if more information is required.

Below is my CSS:

.header {
border: 0px;
margin: 0px;
padding: 0px; 
padding-bottom: 10px;
background-color: black;
color: white;
display: block;
text-align: center;
}
h1 {
border: 0px;
margin: 0px;
padding: 20px;
}
.container-fluid {
height: auto;
border: 0px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}

.btn btn-primary {
border: 20px;
}
.card {
align-items: center;
justify-content: center;
}
.card-body {
display: block;
padding: 0px;
}
.card-title > img {
margin-rigth: 5px;
}

.table {
font-size: 20px;
 }

HTML:

 @{
 ViewData["Title"] = "Home Page";
 }

<div class="header">
    <h1>My Health Vision</h1>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary btn-lg btn-block">Add new goal</button>
    </div>
</div>

<div class="container-fluid">
    <div class="card" style="width:400px">
        <div class="card-body">
            <h4 class="card-title"><img src="images/goal-icon.png" width="60" height="60" />My weigth goal</h4>
            <table class="table">
                <tbody>
                    <tr>
                        <th scope="row">Goal weight</th>
                        <td>85</td>
                    </tr>
                    <tr>
                        <th scope="row">Deadline</th>
                        <td>2018-05-30</td>
                    </tr>
                    <tr>
                        <th scope="row">Current weight </th>
                        <td>90 <button type="button" class="btn btn-primary btn-sm">Update</button></td>
                    </tr>
                    <tr>
                        <th scope="row">Best weight</th>
                        <td>87</td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>
</div>

Updated with HTML.

Answer №1

Opt for:

height: 100%;

Consider using:

height: 100vh;

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

How to dynamically add table rows and cells with JavaScript using a single selection input

I am working on a project that involves a selection input with around 5 options. Additionally, there is an empty table that follows this format: <table> <tr> <td>X (for deletion)</td> <td>Option name</td> ...

What is preventing me from clicking on the left side of the link on this CSS flip card while using Chrome browser?

When attempting to click the left side of the link on the back of this flip card in Chrome, it does not respond. However, hovering over the right side allows interaction with the link: /* Vendor prefixed by https://autoprefixer.github.io */ .card { ...

Emphasize the cell in the initial column to indicate the resulting or winning selection

Having trouble sharing my code directly, so please check out the JSFiddle link to see it in action. Once you click the "Click to Draw a Winner" button, a winner will be randomly selected after 10 seconds. The only issue is that currently only the winning b ...

What specific features does CSS3 offer in terms of background-size properties?

Let's delve into my knowledge: $, like in font-size: 14$; em, as in margin: 2em; What other units are out there? ...

Enhanced HTML table using Bootstrap with a plethora of additional elements

I know this might sound like a silly question, but I've been struggling to create an HTML table that has the following requirements: https://i.sstatic.net/FiRSD.jpg Additionally, I want the table to be hover sensitive so that when you place your curs ...

Refreshing the parent page in Oracle Apex upon closing the child window.When the child window

I have created an interactive report with a form where the interactive report is on page 2 as the parent page and the form page is on page 3 as the child page. In the parent page, I have written JavaScript to open a modal window (form page - page 3) using ...

How can you gradually fade out the bottom edge of a rendered component until it is re-rendered?

Currently, I am developing a reviews microservice for an e-commerce platform using react and react-bootstrap. My goal is to showcase 5 reviews initially, followed by a button to expand and reveal more reviews. In order to achieve this, I envision the botto ...

horizontal alignment of row content to the right in HTML

Trying to align a text and a small image horizontally to the right: <div class="row float-right"> <div class="title" >Stream Chat</div> <img src="~assets/chat.svg" /> </div> ...

allowing the bootstrap accordion to expand only upon clicking the arrow

I'm currently using Bootstrap 5 to style my website, and I'm curious if there's a way to make the accordion only expand when the arrow on the right side is clicked. The default behavior expands the entire button, but I'd like to change ...

The "Read more" link on Blogger is visible, but not functional when viewed on a mobile

Seeking help with my blogger theme issue - on mobile, the "read more" link is visible but not clickable. When I switch to landscape mode, it becomes clickable. Any suggestions on how to fix this would be greatly appreciated. Thank you! Website: Pastebin ...

Displaying validation feedback upon submitting a form using AJAX in ASP.NET MVC

In my ASP.Net MVC project, I am trying to display a loading image using jQuery when a form is submitted and the next action method is called. The reason for this is that after logging in, there is a delay in loading the next page. I have experimented with ...

Tips for automatically adjusting a vertical side bar to fit between the browser's header and bottom

I'm having trouble with aligning my sidebar vertically between the header and the bottom of the browser window. Currently, the bottom items are extending beyond the browser's bottom edge. How can I adjust this to ensure proper alignment? Here is ...

Customizing table widths with CSS and JavaScript to mimic Excel's column resizing feature

Looking for a way to implement column resizing in a table similar to Excel where only the width of the current column increases without affecting the width of neighboring columns. This should create a scrollable table below. I've attempted using a pl ...

Customizing the image border at the top of the navigation bar

I'm in need of assistance with my navigation bar design. I have a specific vision for it, and I even have an image of the "rough texture" that I want to incorporate into the navigation menu. However, I've been struggling to figure out how to use ...

Locating and clicking a button within a table using Selenium WebDriver with Java, along with an event listener

This is my first question on Stack Overflow and I have not made any progress after a day of research. I am currently experimenting with WebDriver in Netbeans for testing our services. We chose WebDriver because we will need to test file uploads in the fut ...

Show the selected information directly on the page according to the user's choice

Trying to implement routing within an Angular controller. I have a tabbed interface with multiple tabs, and when the user clicks on Tab2, it reveals a list of options for selection. Upon clicking the link "Red", I want to display the content from red.html ...

The authentication process was unsuccessful due to the remote party terminating the transport stream connection with the SMTP Mail Client

I encountered an issue when trying to reset a password and sending an authentication email. Is the problem related to ServicePointManager.SecurityProtocol or SmtpClient? Where should I make changes or adjustments? The application is currently running on ...

Using jQuery trigger to activate a function whenever a new <li> element is appended to a <ul> list

I am currently facing an issue with a PHP page that utilizes flush() and ob_flush() to send progress updates to a browser. The page generates a styled <ul class="progresslog"> where individual <li class="{success|warning|error}"> items are sent ...

Issues with Persistent Navbar Stickiness

I'm encountering an issue with the sticky navbar on my website. I implemented the code for this navbar from a tutorial at w3schools. However, the problem is that the sticky effect on the navigation menu doesn't seem to work correctly. The menu j ...

Mobile devices consistently experiencing issues with JavaScript generated elements overlapping

I'm currently in the process of creating a quiz based on a tutorial I found at https://www.sitepoint.com/simple-javascript-quiz/. While I followed the tutorial closely and integrated Bootstrap, I am encountering an issue specifically with mobile devic ...