如何创建一个固定的全屏不可滚动的div？答案

【问题标题】：How to create a fixed full-screen non-scrollable div?如何创建一个固定的全屏不可滚动的div？
【发布时间】：2017-07-11 01:23:29
【问题描述】：

我试图模仿一个典型的模态。当用户点击某个东西时，模态框就会显示出来，带有全屏且固定的透明背景。

目前我有这个：

.thank-outer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: rgba(222, 222, 222, 0.7);
}

&lt;div class="thank-outer" id="thankyou"&gt; Some text &lt;/div&gt;

div的高度不是浏览器的高度，而是整页内容的高度，所以是可以滚动的。

如何改成div的高度就是浏览器的高度？

【问题讨论】：

使用vh和vw CSS单位，分别对应viewport-height和viewport-width。
@Dai，我试过了，div还是可以滚动的……
您可以尝试将全尺寸添加到正文中，html, body { height: 100%;边距：0； }
通常情况下，所有偏移量均为 0 的位置固定 div 将为您工作。但是，如果您是从移动浏览器中检查它，它可能是可滚动的。这是你面临的问题吗？

标签： html css

【解决方案1】：

您可以通过将body 元素的overflow 属性设置为hidden 轻松实现此目的。这会切断所有溢出屏幕的元素（并会形成滚动条）。

const $modal = document.querySelector('.modal');
const $button = document.querySelector('button');    

// Opening modal
$button.addEventListener('click', () => {
  document.body.classList.toggle('modal-visible');
  $modal.classList.toggle('visible');
});

body.modal-visibile {
  /* remove scroll bars when modal visible */
  overflow: hidden;
}

.modal {
  /* it is initially hidden */
  display: none;
  
  /* it will span whole screen */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;


  /* make it on top of all elements */
  z-index: 1000;
  overflow: hidden;
  pointer-events: all;
  
  /* make the background white, but also with 80% opacity */
  background: rgba(222, 222, 222, 0.8);
}

.modal.visible {
  display: block;
}
    
button {
  position: relative;
  z-index: 1001;
}

<button>Toggle Modal</button>

<h1>Some amazing content</h1>
<h2>Hopefully you enjoy this awesome content.</h2>
<p>Why are you still reading this? Just click the button!</p>

<div class="modal">
  <h1>It's a whole new world!</h1>
</div>

【讨论】：

【解决方案2】：

<html>
<head>
    <style>
        body{
            height:100%;
            width:100%;
            margin:auto;
        }
        #thankyou{
            height:100%;
            width:100%;
            background: rgba(222, 222, 222, 0.7);
        }
    </style>
</head>
<body>
    <div class="thank-outer" id="thankyou">
        Some text
    </div>
</body>
</html>

【讨论】：

【解决方案3】：

这是我最喜欢的创建模式的纯 CSS 方法，仍然需要一些工作才能使其 100% 响应，但基本骨架就在那里。

模态框可以包含元素，在模态框外点击会关闭它。里面还有一个关闭按钮。

全屏打开以进行演示。

/* essential code */

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, .5)
}

.closeoverlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  display: block;
  z-index: 2;
  position: fixed;
  cursor: pointer;
}

.closebutton {
  color: red;
  text-decoration: none;
  font-size: 30px;
  margin: 0 auto;
  display: table;
}

.modal:target {
  opacity: 1;
  pointer-events: auto;
}

.modal:target>.closeoverlay {
  display: block;
}

.modal>div {
  width: 300px;
  height: 500px;
  max-width: 75vw;
  max-height: 75vh;
  text-align: center;
  position: relative;
  background: #131418;
  z-index: 3
}

.wrap,
.modal {
  display: flex;
  align-items: center;
  justify-content: center
}


/*demo fluff follows */

p {
  color: green;
  font-size: 20px;
  animation-name: rotate;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  display: block;
}

.minion {
  opacity: .7;
  margin: 0 auto;
  max-width: 50%;
  max-height: 50%;
}

button {
  margin: 2em 0 0 0;
  cursor: pointer;
}

.closebutton:hover {
  color: white;
  cursor: pointer;
}

.clutter {
  margin: 2em auto;
  padding: 40px;
  width: 400px;
  max-width: 100%;
  text-align: justify;
}

@keyframes rotate {
  0% {
    filter: hue-rotate(0);
  }
  100% {
    filter: hue-rotate(360deg);
    ;
  }
}

<div class="wrap">
  <a href="#M"><button>Are you ready to enter the modal?!</button></a>
  <div id="M" class="modal">
    <div class="modal-content">
      <a class="closebutton" href="#">&times;</a>
      <img class="minion" src="https://68.media.tumblr.com/b7a2e2b2d3a3a21ce6e38ee9f24d10a0/tumblr_nwivayrZFM1u95rdno1_400.gif">
      <p>Welcome to the modal!</p>
    </div>
    <a href="#" class="closeoverlay"></a>
  </div>
</div>
<div class="clutter">Bacon ipsum dolor amet shoulder sausage rump venison kevin prosciutto salami shank. Venison salami flank doner burgdoggen, shoulder beef sausage swine alcatra short loin pig chuck. Pastrami sirloin shoulder, swine frankfurter beef strip steak sausage
  salami tri-tip. Prosciutto leberkas boudin pastrami sausage pork. Hamburger pancetta jowl venison pastrami. Filet mignon alcatra burgdoggen salami, ham hock shoulder pork loin sirloin jowl picanha flank drumstick pancetta. Turkey shoulder cupim rump
  ball tip strip steak turducken tri-tip biltong pork doner. Turducken leberkas chuck filet mignon bresaola picanha ball tip pig ground round shankle. Shank pork ribeye fatback, capicola pork loin tri-tip porchetta biltong landjaeger ham hock hamburger.
  Strip steak pork chop sirloin, tenderloin pork loin drumstick pig t-bone hamburger tail short ribs. Prosciutto burgdoggen leberkas landjaeger venison, meatloaf flank pork chop sausage bresaola tenderloin. Ham cow t-bone leberkas capicola turkey, jowl
  biltong chicken. Salami venison sirloin bresaola chicken. Ground round bacon chuck pastrami capicola tongue t-bone spare ribs leberkas. Short ribs beef andouille jerky shank ham hock. Rump hamburger boudin, short loin doner capicola cow spare ribs salami.
  Chicken hamburger strip steak filet mignon salami turkey doner frankfurter ball tip kevin porchetta andouille tongue cupim. Short loin bresaola pork chop porchetta pancetta. Sirloin burgdoggen ground round short loin corned beef cupim porchetta bresaola
  brisket leberkas pork chop. Leberkas salami cupim short loin prosciutto pastrami ham ground round strip steak bacon. Jowl brisket beef corned beef pancetta sausage pastrami shank swine. Tri-tip pork belly capicola ball tip tongue pork loin. Rump andouille
  swine, pig tenderloin tail hamburger ribeye short loin picanha leberkas porchetta ham beef pork. Biltong bresaola meatball shank tail andouille. Pig spare ribs short ribs ground round pork chop salami turducken.</div>

【讨论】：