How can I create additional white space at the end of my webpage with CSS grid?

Looking for some help with CSS as a beginner here. I'm facing an issue where my CSS is creating excessive blank space at the bottom of my document, almost 60% of it. Could this be due to incorrect parent parameters or the children elements?

This is my HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Redacted</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <div class="grid-container">
    <ul>
      <li><a href="about.asp">About</a></li>
      <li><a href="portfolio.asp">Portfolio</a></li>
      <li><a href="contact.asp">Contact</a></li>
      <li><a id="asides" href="asides.asp">Asides</a></li>
    </ul>

    <p class="intro">
      Bacon Ipsum
    </p>

    <p class="projects">
      Lorem Ipsum
    </p>

    <footer>Footer placeholder</footer>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Here's the CSS code:

* {
  border: 1px solid gold;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #ffffff;
}

.intro {
grid-column: 1 / span 4;
grid-row: 2; 
}

.projects {
grid-column: 1 / span 4;
grid-row: 3;
}

footer {
grid-column: 1 / span 4;
grid-row: 4;
}


body {
  background-color: rgb(124, 252, 188);
  margin: 0;
  padding: 0;
} 

Apologies for the messy formatting, appreciate any help you can provide!

Answer №1

You need to make sure to include the height property for both body and grid-container

html,
body {
  height: 100%;
}

Also, remember to add the height property to the grid-container

.grid-container {
    height: 100%;
    ...
}

Check out this example on CodePen

* {
  border: 1px solid gold;
}

html,
body {
  height: 100%;
}

body {
  background-color: rgb(124, 252, 188);
  margin: 0;
  padding: 0;
}

.grid-container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #ffffff;
}

.intro {
  grid-column: 1 / span 4;
  grid-row: 2;
}

.projects {
  grid-column: 1 / span 4;
  grid-row: 3;
}

footer {
  grid-column: 1 / span 4;
  grid-row: 4;
}
<div class="grid-container">
  <ul>
    <li><a href="about.asp">About</a></li>
    <li><a href="portfolio.asp">Portfolio</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a id="asides" href="asides.asp">Asides</a></li>
  </ul>

  <p class="intro">
    Bacon Ipsum
  </p>

  <p class="projects">
    Lorem Ipsum
  </p>

  <footer>Footer placeholder</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

The Web Browser is organizing CSS elements in an alphabetized sequence

map.css({ 'zoom': zoom, 'left': map.width()/(2*zoom) - (point[0]/100)*map.width(), 'top': map.height()/(2*zoom) - (point[1]/100)*map.height() Upon observation, it appears that Chrome adjusts the map zoom first be ...

Why doesn't the style show up when JavaScript is turned off with Material UI, CSS Modules, and Next.js?

This is my first time diving into Material UI, CSS Modules, and Next.js with a project. Issue: I noticed that when I disable JavaScript in the Chrome DevTools, the styles are not being applied. I'm not sure if this has something to do with Materia ...

How can I use Jquery to loop through each combobox on the page and delete those with a specific class name?

I am currently dealing with a page that contains multiple combo-boxes. Each combo-box has a default option set as empty, which is given the class name 'hide'. This functionality seems to work perfectly in Chrome and Firefox, as the hidden options ...

What is the best way to showcase an array of objects in a table with two columns?

Looking to showcase an array of objects in a table with 2 columns. What's the simplest way to achieve this display? const columns = [ { subHeading: "A", subText: ["1", "2"] }, { subHeading: & ...

Is there a way to modify a CSS class in Chrome that is only visible when I perform a drag action?

For the website project I am working on, I have an element that only changes its style when I drag something over it. This is achieved by adding a CSS class to it. However, editing this style has proven to be challenging because I cannot live edit it in C ...

Adding Logging Features in ASP.NET

I am currently working with an .ascx file that contains both JavaScript and div elements. I need to add a log statement inside a function for troubleshooting purposes. Can someone please guide me on how to achieve this? Below is a snippet of my code: fu ...

The issue with jQuery click function seems to be limited to Firefox

After a long hiatus from posting here, I hope this isn't breaking any rules. For those who prefer visual examples, you can visit the live page at: The drop-down menu functions perfectly in IE, Chrome, and Safari, but seems to be causing issues in Fir ...

Styling web pages with HTML and CSS directly from a MySQL

I'm facing a challenge in crafting a solution for a intricate issue. My project involves building a website that generates HTML templates containing both CSS and HTML files. Users will have the ability to create multiple templates/sites. In an effort ...

Align the text in the center of the button vertically

Struggling to vertically center text on a button? I understand the frustration! I've been working on this issue for a whole day with no success. My setup involves NEXT.js and TailwindCSS. <main> <div class='flex justify-center ite ...

Tips for adjusting the color of a <a> tag upon clicking, which remains unchanged until the URL is modified

My goal is to maintain the color of a link when it is clicked. Currently, hovering over the navbar link changes it to greyish, but I want it to remain a different color after clicking on it. I am implementing this using the react-router-dom library for the ...

I'm looking to customize the background color and font size for an accordion in Bootstrap 4 with Vue.js. Can anyone provide guidance

Hello, I am currently using an accordion with Bootstrap 4 and Vue.js. Here is the code snippet: <div class="faq_accordion" role="tablist"> <b-card no-body class="mb-1"> <b-card-header header-tag=" ...

Modifying the attribute from "content-disposition:attachment" to "content-disposition:inline"

I created an HTML email signature that worked perfectly until I tested it in the Outlook Mail Client 2010, which is currently not displaying images but instead offering them as download attachments. I am utilizing DataUri for images: <img width="56" ...

PHP function with JSON response encountered an error during the AJAX call

I am currently working on creating a News Ticker that utilizes PHP, Javascript, and AJAX. The first step involved creating a PHP function called getFeed(), which gathers data from various news websites into an Array. This data is then returned in JSON form ...

Can the direction of a splide slider be altered in a responsive design?

Is there a way to change the direction of a Splide slider in a responsive design? I'm running into issues when attempting to adjust the thumbnail slider's direction in responsive mode. var secondarySlider = new Splide("#splidev2", { ...

Adding the text-success class to a Bootstrap 5 table row with zebra striping does not produce any noticeable change

I am encountering an issue with a Bootstrap 5 table that has the class table-striped. When a user clicks on a row, I have implemented some jQuery code to toggle the class text-success on the row for highlighting/unhighlighting purposes. The highlighting f ...

Retrieving the chosen option using a change event listener

Is there a way to retrieve the selected option using a change listener in TypeScript? I have come across JavaScript examples where the value is retrieved through event., but I am unable to locate any field that contains the selected option. <!DOCTYPE ...

Executing a PHP script to initiate a ping transmission

I have a project to complete for my university involving the development of a simple application. However, I lack experience in this area and am unsure how to proceed. The objective is straightforward: I want to send ping requests to 50 IP addresses at t ...

The drop-down list unexpectedly closes at the most inconvenient moment

I am looking to create a search input with a drop-down list. The requirement is for the list to close when the focus or click is anywhere except the search input. I have added a function listClose() to the "blur" listener, but now I am unable to capture t ...

Managing mouse click events in jQuery

Here on SO, I successfully implemented the mouse down handler. Now, my goal is to separate these functions into their own file named test.js. Within test.js, the code looks like this: function handleMouseDown(e) { console.log('handleMouseDown&ap ...

Tips for creating a dashed border line that animates in a clockwise direction when hovering

I currently have a dashed border around my div element: .dash_border{ border: dashed; stroke: 2px; margin:20px; } My goal is to make the dashed lines move clockwise when my pointer hovers over the div element and stop moving ...