Html 弹出窗口溢出溢出：自动，我不明白为什么

发布于01月13日

我知道这样的问题已经被问了几千次了，但这件事让我抓狂. 我正在try 创建一个简单的弹出窗口，子对象的高度已设置，如果我设置标题栏的高度，它不会改变任何东西.

希望有人能帮我这个忙，这样我今天就不用砸键盘了.

谢谢.

Screenshot

html {
  height: 100vh;
}

#popup-window {
  position: absolute;
  ;
  height: 50%;
  width: 50%;
  background-color: #50ed77;
  border: 1px solid #3E3B3B;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 800px;
  z-index: 2;
  -webkit-box-shadow: 2px 2px #000;
  box-shadow: 2px 2px #000;
}

#popup-window-titlebar {
  background-color: #21522d;
  color: white;
  padding: 10px;
  font-weight: bold;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#popup-window-inner {
  margin: 5px;
  max-height: 100%;
  height: 100%;
}

#popup-window-list {
  margin: 5px;
  padding: 10px;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
}

.window-close-btn {
  float: right;
  color: #fff;
  font-weight: bold;
  transition-duration: .5s;
}

.window-close-btn:hover {
  cursor: pointer;
  color: #ff115c;
}

<div id="popup-window">
  <div id="popup-window-titlebar">
    <b>Funny Title</b>
    <div class="window-close-btn">
      X
    </div>
  </div>
  <div id="popup-window-inner">
    <div id="popup-window-list">
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
    </div>
  </div>
</div>

想要修复溢出.我在谷歌上搜索了2个小时，try 了不同的属性(位置、高度...)

html { height: 100vh; } #popup-window { position: absolute; height: 50%; width: 50%; background-color: #50ed77; border: 1px solid #3E3B3B; border-radius: 5px; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 800px; z-index: 2; -webkit-box-shadow: 2px 2px #000; box-shadow: 2px 2px #000; display:flex; /* make this flex with a direction of column */ flex-direction:column; } #popup-window-titlebar { background-color: #21522d; color: white; padding: 10px; font-weight: bold; border-top-left-radius: 5px; border-top-right-radius: 5px; } #popup-window-inner { margin: 5px; flex-grow: 1; /* make this grow to fill remaining space and also relative */ position:relative; } #popup-window-list { position:absolute; /* absolutely position this to fill inner - 5px below replaces your margin */ top:5px; left:5px; right:5px; bottom:5px; padding: 10px; overflow-y: auto; } .window-close-btn { float: right; color: #fff; font-weight: bold; transition-duration: .5s; } .window-close-btn:hover { cursor: pointer; color: #ff115c; }

<div id="popup-window"> <div id="popup-window-titlebar"> <b>Funny Title</b> <div class="window-close-btn"> X </div> </div> <div id="popup-window-inner"> <div id="popup-window-list"> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> <div>Entry</div> </div> </div> </div>

Html 弹出窗口溢出溢出：自动，我不明白为什么

推荐答案

Html相关问答推荐

卡片上方的文本

我的表的第一列似乎是推其他2列到右边，我不能改变它

纯CSS语音气泡与半透明背景和边框

获得一个css框，以便在页面太小时不再粘在页面的角落.

为什么我得不到有错误的字段？迈克尔·哈特尔教程.7.3.3

如何在R rmarkdown中创建循环中的分页表？

创建特定的CSS网格布局

如果最后一行的卡数少于其他行，则在使用flex grow使卡在调整大小时拉伸后，flex卡的宽度将被拉伸

仅 Select 悬停的级别，而不 Select 其父级或子级

：after 伪元素没有出现，即使它有 content 属性

为什么我的 div 元素没有形成一个圆形时钟？

ul li 右侧的 Bootstrap 加载微调器

HTML 如何根据屏幕尺寸调整/裁剪视频背景？

如何让 backdrop-filter： blur() 效果在 iOS 上运行？

如何使用 CSS Flex 设计一个导航栏，其中一组项目左对齐而另一组项目右对齐？

具有淡入/淡出效果的 CSS 选框

我正在try 向我预先存在的导航栏添加响应式汉堡包导航，但由于某种原因它没有显示

以 HTML 格式显示的 LaTeX 表格

在 EJS 中将元素放置在彼此下方的列中

如何将图像高度设置为等于文本高度？