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/

我什至尝试在主体上设置一个明确的高度，但即使HTML和主体都小于视口高度。

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

Answer 1

留白的原因是您的容器和模式容器都是显示块。您可以通过删除底部看到问题：.modal-container中的500px

解决方案：

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

Answer 2

将模态容器位置更改为from flask import Flask app = Flask(__name__) @app.route("/") def first_page(): return "First page" @app.route("/login") def login(): return "login page"，并使用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;
}

您也可以here对其进行测试

Answer 3

问题是您没有正确定位模态。本质上，您希望模态位于屏幕的中央。我们可以通过使用值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;

是什么在页面底部创建了多余的空间？

3 个答案: