An issue with excess whitespace appearing below the footer while adjusting the size of the webpage

I have a database table on my website that I am styling with the help of bootstrap. Check out this screenshot for the issue: https://i.sstatic.net/CUkjz.jpg

For the HTML code, you can view it here: And for the relevant CSS, click on this link:

I used pastie.org to share these files because they were too large to paste directly onto stackoverflow.

Answer №1

If you are looking to create a simple one dimensional array layout for your website, consider using CSS flex.

html,
body {
  min-height: 100%;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  background: #eee;
  flex: 0 0 50px;
}

main {
  background: #aaa;
  flex: 1;
}

footer {
  background: #888;
  flex: 0 0 100px;
}
<div class="container">
  <header>
    HEAD
  </header>

  <main>
    BODY
  </main>

  <footer>
    FOOT
  </footer>
</div>

For a more complex two dimensional array layout that includes sidebars, I suggest utilizing CSS grid.

Check out this HOLY GRAIL EXAMPLE:

.container {
  display: grid;
  grid-template-areas: "header header header" "nav content side" "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

header {
  background: #eee;
  grid-area: header;
}

nav {
  background: #888;
  grid-area: nav;
}

main {
  background: #aaa;
  grid-area: content;
}

aside {
  background: #888;
  grid-area: side;
}

footer {
  background: #bbb;
  grid-area: footer;
}
<div class="container">
  <header>
    HEAD
  </header>

  <nav>
    NAV
  </nav>

  <main>
    BODY
  </main>

  <aside>
    SIDE
  </aside>

  <footer>
    FOOT
  </footer>
</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

Managing errors within AngularJS in your controller.js file

In my NodeJS + AngularJS single page application, there are fields for inputting text. I need to create a function in controller.js to check if any of the fields are empty so that an error alert can be displayed in the browser. This is my controller.js fi ...

What are some ways I can customize the appearance of a canvas element?

After discovering a canvas animation, I decided to customize it for my own needs. However, due to the fact that a canvas and its shapes are not DOM elements, I am struggling to style it properly. You can view my current progress here. When you hover over ...

Submitting a PHP form by uploading an image with AJAX

I'm looking to submit form data to a MySQL database using AJAX. While I'm not very familiar with AJAX, I managed to write a code that successfully submits text data to the database. However, I'm facing issues with uploading and storing image ...

floating point for a list item compared to other elements

nav > ul > li { float: left; } #one { float: left; } <nav> <ul> <li> he has a cow </li> <li > he has a dog </li> <li> he has a mouse </li> </ul> & ...

Passing a variable to the render method in a PDF document

I'm currently working on a project with Django where I need to convert an HTML monthly report into a PDF. The data for the report is retrieved from a database based on the selected month. I am facing an issue in sending the selected month from the HTM ...

Java servlet is unable to interpret the name of an html select tag

Currently, I am implementing a feature where table rows with select boxes are added dynamically and the values of these select boxes are retrieved in a servlet. The process of adding the select boxes is functioning properly; however, when attempting to ret ...

Challenge with constructing HTML structures

I created a table in HTML: <table cellpadding="0" cellspacing="0" border="0" style="width:1000px" id="maintable"> <thead> <tr> <th class="asc" width="30"><h3>ID</h3></th> <th width="200">&l ...

Tips for organizing a dashboard design with Bootstrap

I am looking to design a dashboard using the Bootstrap grid system. Here is the layout I have in mind: https://i.sstatic.net/cqWP5.jpg What would be the optimal way to structure this in the HTML file? Would a layout of 5 rows and 2 columns work best? Th ...

The jQuery mouseout event is activated whenever my tooltip is hovered over

Recently, I encountered an issue with a menu that adds a https://i.sstatic.net/A0J2U.png Within the menu, there is jQuery code that functions to add a class on hover and remove it on mouse-out. The code snippet looks something like this... $(document).r ...

Utilizing the jQuery slideToggle method on the specified target element

I'm encountering an issue with jQuery slideToggle, and here's the code I have: $(".dropdownmainmenu").click(function(){ $(this).children(".showmenu").slideToggle(); $(this).toggleClass("activemainmenu"); $(this).find(".showarrowmainmen ...

methods for detaching event listener from bootstrap carousel indicator elements

I am currently utilizing the bootstrap5 carousel feature and I am seeking a way to trigger a custom event when either the previous or next indicators are clicked. My goal is to stop the default bootstrap event from being triggered, however my attempts at v ...

What's causing the excessive amount of white space in my image?

Whenever I include a picture of myself on the page, it creates excessive white space at the bottom. I'm not sure why this happens, but removing the image eliminates the white space. I've attempted adjusting the margins and padding, as well as se ...

Use jQuery to calculate the width of the wrapper and evenly divide it among the div elements inside

Seeking assistance with a dynamic div wrapper containing multiple inner divs. The number of inner divs will vary, requiring a script to determine how many are present and adjust their widths to fit perfectly within the wrapper. <div id="wrapper"> &l ...

Last item in Material UI Grid container not filling up entire space

I designed a Grid container with 2 Grid columns, each containing 3 elements. However, I am facing an issue where the last element of each column is not appearing at the bottom as intended. What could be causing this problem? For reference, you can view th ...

What could be the reason for the malfunction of jQuery's show() function?

Using jQuery, I have implemented a functionality to hide a div using the hide() method. However, upon clicking a link, the div is supposed to show but unexpectedly disappears after appearing briefly. HTML Code Snippet <div id="introContent"> & ...

Display div - conceal div - pause for 15 minutes - continue the cycle

I have a challenging JavaScript task that I've been struggling with for quite some time. The goal is to display a div for 5 seconds, hide it, wait for 15 minutes, then show it again for another 5 seconds, and continue this process in an infinite loop. ...

What is the best way to obtain a date in the format of yyyy_mm_dd from a datepicker tool?

I am working with 2 datepickers that have similar structures, but different names. The first one has the id "fecha_1_1" and the second one has the id "fecha_1_2". <div class="col-sm-3"> <p>Desde</p> <div class="f ...

The issue I am facing currently revolves around the absence of images on

I recently uploaded a captivating HTML page for my website's captive portal. Although the redirection to the designated page is working perfectly, I am facing an issue with the images included in the HTML page. Even though I went ahead and uploaded th ...

Image floating to the left and right sides within a group, with the text vertically aligned in the middle of a div of unspecified height

Can text be vertically aligned in the middle of a div with an unknown height when there is a floated image present? Specifically, for the first and third div group of 'groupsection2', the image will float to the left; and for the second and fourt ...

When a button is clicked in (Angular), it will trigger the highlighting of another button as a result of a value being modified in an array. Want to know the

Currently in the process of developing a website with Angular, I've encountered an unusual bug. The issue arises when using an *ngFor div to generate twelve buttons. <div *ngFor = "let color of colors; let i = index" style = "display ...