是什么在我的页面底部创建了额外的空间？

Question

我的 html 和 body 元素下方出现了空格，我想知道是什么原因造成的。这超出了应有的范围扩展了我的页面。我有一种感觉是模态窗口造成的。我尝试设置溢出：隐藏在主体、模态容器以及它的各个子项上，但没有奏效。

这是我的 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;
}

这是我的小提琴的链接： https://jsfiddle.net/v83zqofp/1/

我什至尝试在 body 上设置显式高度，但即使是 HTML 和 body 都小于视口高度。

是我的模态窗口创建了额外的空间还是其他什么？

Answer 1

问题是您没有正确定位模态框。本质上，您希望您的模式位于屏幕的中心。我们可以通过使用 absolute 定位和值top: 50% 和left: 50% 来开始这个过程。伟大的！这让我们到达那里的一部分，但不是那里的全部，因为您可能会注意到只有那个变化，模态不是居中的（只有模态的左上角是）。原因是因为元素的原点是左上角而不是中心，所以它使你的模态的左上角居中。然后你可以做的是使用 CSS 变换来偏移原点并将其移回它需要的位置，-50% 在每个方向上。本质上，这是所需的 CSS 更改（您的其余代码都可以）：

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

基本上：

• 使用绝对定位将模态置于中心（50%、50%）
• 使用 CSS 变换将 X 和 Y 坐标“平移”回来（-50%、-50%）

我已经为您提供了可行的解决方案：https://jsfiddle.net/f34nqh1r/

我还提供了一个 CodePen，用于说明我通常喜欢如何处理模式，其中包括对可滚动内容的支持。 https://codepen.io/tinacious/pen/qeWMzB

您获得额外空间的原因是因为您使用了相对定位，这不会将其拉出原始流程。你提出了 500px 的要求，它要求始终，而在文档流中，底部有 500px。所以你得到额外间距的原因是position: relative; bottom: 500px;

Answer 2

空白的原因是您的容器和模态容器都是显示块。您可以通过从 .modal-container 中删除 bottom: 500px 来查看问题

解决方案：

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

Answer 3

将您的模态容器位置更改为absolute，而不是bottom:500px 使用top:65px。您可以再做一些更改，让它看起来不错。

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

请看下面的片段：

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>

你也可以here测试一下