什么在我的页面底部创建额外的 space？

Question

我 space 出现在我的 html 和 body 元素下面，想知道是什么原因造成的。这超出了应有的范围来扩展我的页面。我有一种感觉是模态 window 引起的。我尝试设置 overflow: hidden on 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;
}

这是我 fiddle 的 link： https://jsfiddle.net/v83zqofp/1/

我什至尝试在 body 上设置明确的高度，但即使是 HTML 和 body 也小于视口高度。

是我的模态 window 创建了额外的 space 还是其他东西？

Answer 1

白色 space 的原因是您的容器和 modal-container 都是显示块。您可以通过从 .modal-container

中删除 bottom: 500px 来查看问题

解决方案：

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

Answer 2

将您的 modal-container 位置更改为 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也

Answer 3

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

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

本质上：

使用绝对定位将模态框置于中心(50%, 50%)
使用 CSS 转换 "translate" X 和 Y 坐标返回 (-50%, -50%)

我已经将你的 fiddle 与工作解决方案进行了分叉：https://jsfiddle.net/f34nqh1r/

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

您获得额外 space 的原因是因为您使用的是相对定位，这不会将其从原始流程中拉出。你把500px的要求放在任何时候都要求，而在文档的流程中，底部有500px。所以你得到额外间距的原因是 position: relative; bottom: 500px;

什么在我的页面底部创建额外的 space？

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

javascript

html

css

simplemodal