Question

我目前正在尝试制作一个完全居中的弹出式菜单，但由于某种原因，我似乎无法一直滚动到顶部。我认为transform只是视觉效果，因此#content实际上仍在top: 50%。我有没有办法让div完全集中在window，同时能够看到#content内的所有内容？

＆＃13;

var toggle = false;
var p = document.getElementById("popup");

document.getElementById("show").onclick = function(event) {
  p.style.display = "initial";
  document.body.style.overflow = "hidden";
};

document.getElementById("hide").onclick = function(event) {
  p.style.display = "none";
  document.body.style.overflow = "auto";
  
};

＆＃13;

html, body {
  margin 0;
  padding 0;
  width: 100%;
  height: 100%;
}

#popup {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  overflow-y: scroll;
}

#content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<div id="popup">
  <div id="content">
    <button id="hide">Hide</button>
    <h1>Cant See</h1>
    <p>Cant SeeCant SeeCant SeeCant SeeCant SeeCant SeeCant See</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
    <p>test test test test test test</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
    <p>test test test test test test</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
  </div>
</div>
<div>
  <button id="show">Show</button>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
 
</div>

＆＃13;

Answer 1

您可以将position: absolute应用于父级（#content）并使用display: flex

，而不是使用#popup居中margin: auto

例如

var toggle = false;
var p = document.getElementById("popup");

document.getElementById("show").onclick = function(event) {
  p.style.display = "flex";
  document.body.style.overflow = "hidden";
};

document.getElementById("hide").onclick = function(event) {
  p.style.display = "none";
  document.body.style.overflow = "auto";

};

html,
body {
  margin 0;
  padding 0;
  width: 100%;
  height: 100%;
}

#popup {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  overflow-y: scroll;
}

#content {
  margin: auto;
}

<div id="popup">
  <div id="content">
    <button id="hide">Hide</button>
    <h1>Cant See</h1>
    <p>Cant SeeCant SeeCant SeeCant SeeCant SeeCant SeeCant See</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
    <p>test test test test test test</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
    <p>test test test test test test</p>
    <h1>Test</h1>
    <p>test test test test test test</p>
  </div>
</div>
<div>
  <button id="show">Show</button>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>
  <h1>Hello World!</h1>
  <p>Hello Hello Hello Hello Hello Hello</p>

</div>

Answer 2

将- run: export TERM=xterm && ./gradlew androidDepedencies添加到height: 100%应该可以解决问题

完全居中时无法滚动到顶部

2 个答案: