Question

我有一个“Popup”供Costumers输入文章的数量和其他一些内容。

我希望此弹出窗口具有响应性，因此当高于屏幕时，外边框应可见（在所有四个网站，所有它看起来像全屏幕桌面窗口，标题和关闭按钮保持在顶部，但内容（文章名称+表格为数量等。）应该可滚动。

scrollpart是什么不起作用。它只是“隐藏”溢出，并且没有滚动条出现或任何东西，尽管在其上使用“overflow：auto”。

* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}
#background_block {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(200, 200, 200, 0.8);
}
#popup {
  background-color: white;
  width: 100%;
  height: 20em;
  height: 20rem;
  max-height: 100%;
  overflow: hidden;
  border: 0.2rem solid #6388bd;
}
#popup_header {
  background-color: #6080cc;
  color: white;
  height: 2rem;
}
#popup_header h2 {
  float: left;
}
#popup_header a {
  float: right;
}
#popup_content {
  height: 17.5rem;
  overflow: auto;
  background-color: yellow;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
</head>

<body>
  <!-- Block Background -->
  <div id="background_block">
    <!-- Popup -->
    <div id="popup">
      <!-- Title and close-Button -->
      <div id="popup_header">
        <h2>Popuptitle</h2>
        <a title="Close" onclick="alert('This would have closed me on the actual site!')">X</a>
      </div>
      <!-- Article name, quantity and measurements -->
      <div id="popup_content">
        <h3>Best thing must buy</h3>
        <form>
          <label for="quantity">Quantity:</label>
          <input type="number" name="quantity" min="1">
          <label for="width">Width:</label>
          <input type="number" name="width">
          <!-- And so on -->
          <input type="submit" name="next" value="Next" class="popupbtn">
        </form>
      </div>
    </div>
  </div>
</body>

</html>

“溢出：自动”内部“溢出：隐藏”未显示任何效果

0 个答案: