What is creating extra space at the bottom of my page?

Question

I have space appearing below my html and body element and was wondering what caused it. This is extending my page more than it should. I have a feeling the modal window is causing it. I tried setting overflow: hidden on the body, the modal container, as well as its individual child items but that didn't work.

Here is my CSS:

* {
  box-sizing: border-box;
}

body {
  background-color: rgb(243, 243, 243);
  font-family: 'Roboto', sans-serif;
}
p {
  color: #444E55;
}

.container {
  margin: 0 auto;
  width: 95%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 50px;
  grid-auto-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

header {
  grid-column: 1/span 3;
  color: #4A4A4A
}

img {
  display: block;
  border-radius: 50%;
  height: 100px;
}
.item {
  padding: 12px;
  background-color:  #ffffff;
  border: 1px rgb(197, 197, 197) solid;
}
.item:hover {
  cursor: pointer;
}
.item > * {
  pointer-events: none;
}

.card {
  border-radius: 3px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.text-container {
  line-height: 0;
  margin-left: 10px;
}

.modal-container {
  position: relative;
  bottom: 500px;
} 

.modal {
  background-color:  #ffffff;
  border: 1px rgb(197, 197, 197) solid;
  border-radius: 3px;
  padding: 50px;
  margin: 0 auto;
  width: 30%;
  z-index: 1;
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box.one {
  border-bottom: 1px grey solid;
}

.arrow {
  display: inline-block;
  position: relative;
  left: 100%;
  bottom: 30px;
}
.arrow:hover {
  cursor: pointer;
}
.arrow > * {
  pointer-events: none;
}

.fa.fa-window-close {
  font-family: fontAwesome;
} 

.off {
  display: none;
}
.on {
  display: block;
}

Here is a link to my fiddle: https://jsfiddle.net/v83zqofp/1/

I even tried setting an explicit height on the body, but even the HTML and body are smaller than the viewport height.

Is it my modal window that is creating the extra space or is it something else?

Answer 1

The reason for white space is that your container and modal-container both are display block. you can see the issue by removing bottom: 500px from .modal-container

Solution:

.modal-container{ position: absolute; top: 0; }

Answer 2

Change your modal-container position to absolute and instead of bottom:500px use top:65px. You can make few more changes to make it look good.

.modal-container {
    position: absolute;
    top: 65px;
    width: 30%;
    margin: 0 auto;
    left: 0;
    right: 0;
}

See the Snippet below:

const randomURL='https://randomuser.me/api/?results=12&nat=us';
const container=document.querySelector('.container');
const header=document.createElement("header");
const main=document.querySelector('main');
const modalContainer=document.querySelector('.modal-container');

header.innerHTML=`<h3 class="header">Awesome Startup Employee Directory</h3>`;
container.appendChild(header);

function fetchData (url) {
  return fetch(url)
  .then(resp=>resp.json())
  .catch(Error());
}
function generateHTML (data) {
  fetchData(data)
  .then(function(data){
    let results=data.results;
    return results.map(function(result,index){
      html=`
      <div class="item ${index}">
        <div class="card">
          <img src=${result.picture.thumbnail}>
          <div class="text-container">
            <h4>${result.name.first} ${result.name.last}</h4>
            <p>${result.email}</p>
            <p>${result.location.city}</p>
          </div>
        </div>
      </div>
      `;
      overlayHtml=`
      <div class="modal ${index} off">
        <div class="arrow">
          <i class="fa fa-window-close" aria-hidden="true"></i>
        </div>
        <div class="box-container">
          <div class="box one">
            <img src="${result.picture.thumbnail}">
            <h4>${result.name.first} ${result.name.last}</h4>
            <p>${result.email}</p>
            <p>${result.location.city}</p>
          </div>
          <div class="box two">
            <p>${result.cell}</p>
            <p>${result.location.street} ${result.location.postcode}</p>
            <p>${result.dob.date}</p>
          </div>
        </div>
      </div>
      `;
      main.lastElementChild.insertAdjacentHTML('afterend', html);
      modalContainer.insertAdjacentHTML('beforeend', overlayHtml);
    })
  }).then (function (data) {
      const modals=document.querySelectorAll('.modal');
      const modalsArray=[...modals];
      console.log(modalsArray);

      const arrow=document.querySelectorAll('.arrow');
      const arrowArray=[...arrow];
      console.log(arrowArray);
  })
}

generateHTML(randomURL);
document.addEventListener('click', function (e) {
  e.stopPropagation();
  e.preventDefault();
  if (e.target.classList.contains("item")) {
    itemIndex=e.target.classList.item(1);
    const modals=document.querySelectorAll('.modal');
    const modalsArray=[...modals];
    console.log(itemIndex);
    console.log(modalsArray);
    modalsArray.filter(function (modal) {
      if (modal.classList.item(1)===itemIndex) {
        modal.classList.add('on');
        modalContainer.classList.remove('off');
        modalContainer.classList.add('on');
      }
    })
  }
});

* {
  box-sizing: border-box;
}

body {
  background-color: rgb(243, 243, 243);
  font-family: 'Roboto', sans-serif;
}
p {
  color: #444E55;
}

.container {
  margin: 0 auto;
  width: 95%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 50px;
  grid-auto-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

header {
  grid-column: 1/span 3;
  color: #4A4A4A
}

img {
  display: block;
  border-radius: 50%;
  height: 100px;
}
.item {
  padding: 12px;
  background-color:  #ffffff;
  border: 1px rgb(197, 197, 197) solid;
}
.item:hover {
  cursor: pointer;
}
.item > * {
  pointer-events: none;
}

.card {
  border-radius: 3px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.text-container {
  line-height: 0;
  margin-left: 10px;
}

/*.modal-container { //Override your style
  position: relative; 
  bottom: 500px;
}*/
.modal-container {
    position: absolute;
    top: 65px;
    width: 40%;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.modal {
  background-color:  #ffffff;
  border: 1px rgb(197, 197, 197) solid;
  border-radius: 3px;
  padding: 50px;
  margin: 0 auto;
  z-index: 99;
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box.one {
  border-bottom: 1px grey solid;
}

.arrow {
  display: inline-block;
  position: relative;
  left: 100%;
  bottom: 30px;
}
.arrow:hover {
  cursor: pointer;
}

.fa.fa-window-close {
  font-family: fontAwesome;
} 

.off {
  display: none;
}
.on {
  display: block;
}

<html !DOCTYPE>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Employee Directory</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <main class="container">
    </main>

    <div class="modal-container off">

    </div>
    <script src="app.js" ></script>
  </body>
</html>

You can test it here also

Answer 3

The problem is that you are not positioning your modal correctly. Essentially, you want your modal to be in the centre of the screen. We can start this process by using absolute positioning with values top: 50% and left: 50%. Great! This gets us part of the way there, but not the whole way there, as you may notice with only that change, the modal isn't centred (only the top left of the modal is). The reason is because the origin of the element is the top left not the centre, so it makes your modal's top left corner centred. What you can then do is use a CSS transform to offset the origin and move it back to where it needs to be, -50% in each direction. Essentially, this is the required CSS change (the rest of your code is fine):

.modal-container {
  width: 100%;
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Essentially:

• Use absolute positioning to situate the modal in the centre (50%, 50%)
• Use a CSS transform to "translate" the X and Y coordinates back (-50%, -50%)

I have forked your fiddle with the working solution: https://jsfiddle.net/f34nqh1r/

I've also provided a CodePen for how I generally like to do modals, which includes support for scrollable content. https://codepen.io/tinacious/pen/qeWMzB

The reason you were getting the extra space is because you were using relative positioning, which doesn't pull it out of the original flow. You put the requirement of 500px which required that at all times, while in the flow of the document, there be 500px at the bottom. So the reason you were getting the extra spacing is position: relative; bottom: 500px;