Question

我构建了一个webapp，我使用javascript生成一个弹出窗口。我的问题是子元素.popupRole没有溢出。我找不到问题。它应该在.popupFooter之前可见，然后通过滚动条（overflow: scroll）滚动。我希望你能帮助我。

JSFiddle：

https://jsfiddle.net/22h1y2f9/2/

Answer 1

heigth的.popup必须小于其内容的高度（参见scrollbar-y）和他父母的身高。

.popup {
  width: 400px;
  height: 250px;<--------------changed
  overflow-y: auto;
}

Demo

Answer 2

你必须在popUpContainer的css属性中添加overflow-y：scroll而不是popUp 同时删除位置：从页脚绝对，除非绝对必要，否则不要使用绝对位置（双关语）

body {
  background-color: gray;
}

.popupOpen {
  float: right;
  vertical-align: middle;
  margin-right: 20px;
  margin-bottom: 10px;
  padding-left: 10px;
}

.popupContainer {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: left;
  width: 400px;
  height: 300px;
  display: none;
  z-index: 1000;
  background-color: white;
}

.popupName {
  display: inline;
  margin: 5px;
  line-height: 35px;
}

.popupClose {
  text-align: center;
  display: inline-block;
  float: right;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin: 5px;
}

.popupHeader {
  height: 35px;
  background-color: #ff6000;
  margin-bottom: 5px;
}

.popup {
 width: 400px;
    height: 259px;
    overflow-y: scroll;
}

.popupLabel {
  display: inline-block;
  width: auto;
}

.popupBox {
  float: right;
}

.popupRole {
      height: 25px;
    width: 373px;
    margin: 5px;
    padding-left: 5px
}

.popupFooter {
  height: auto;
    position: relative;
    bottom: 4px;
    right: -5px;
}

#tab3 .popup {
  height: 320px;
}

#tab3 .popupFooter {
  position: relative;
}

.popupSubmit {
  float: right;
  margin: 5px;
  height: auto;
  width: auto;
}

#popupOverlay {
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 999;
}

.popupRole>input {
  width: auto;
}

.popupRole>.popupLabel {
  width: auto;
}

.UAtree,
.STtree,
.HAtree {
  text-align: center;
  height: 50px;
  padding-left: 10px;
  padding-right: 10px;
}

.selectRole,
.selectUser,
.selectManager,
.selectDeputy,
.selectEnvironment,
.selectHardware {
  height: 75px;
  padding-left: 10px;
  padding-right: 10px
}

.selectOS,
.selectDescription {
  height: 50px;
  margin-bottom: 10px;
}

<div class="popupContainer" style="display: block;">
  <div class="popupHeader">
    <h3 class="popupName">WAN</h3>
    <button class="popupClose" type="button" name="close">X</button>
  </div>
  <div class="popup">
    <div class="popupRole">
      <div class="popupLabel">Responsible</div>
      <input type="checkbox" class="popupBox" name="1" value="Verantworlichter">
    </div>
    <div class="popupRole">
      <div class="popupLabel">Developer</div>
      <input type="checkbox" class="popupBox" name="2" value="Developer">
    </div>
    <div class="popupRole">
      <div class="popupLabel">Ready</div>
      <input type="checkbox" class="popupBox" name="3" value="Bereitschafter">
    </div>
    <div class="popupRole">
      <div class="popupLabel">User</div>
      <input type="checkbox" class="popupBox" name="4" value="Anwender">
    </div>
    <div class="popupRole">
      <div class="popupLabel">SystemAdmin</div>
      <input type="checkbox" class="popupBox" name="5" value="SystemAdmin">
    </div>
    <div class="popupRole">
      <div class="popupLabel">foo</div>
      <input type="checkbox" class="popupBox" name="6" value="Roller">
    </div>
    <div class="popupRole">
      <div class="popupLabel">foo</div>
      <input type="checkbox" class="popupBox" name="7" value="toller">
    </div>
    <div class="popupRole">
      <div class="popupLabel">foo</div>
      <input type="checkbox" class="popupBox" name="8" value="voller">
    </div>
    <div class="popupRole">
      <div class="popupLabel">foo</div>
      <input type="checkbox" class="popupBox" name="9" value="fresh">
    </div>
    <div class="popupRole">
      <div class="popupLabel">foo</div>
      <input type="checkbox" class="popupBox" name="10" value="beat">
    </div>
  </div>
  <div class="popupFooter">
    <button class="popupSubmit btntypA" type="button" name="save">save</button>
  </div>
</div>

Answer 3

.popupContainer {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: left;
  width: 400px;
  height: 300px;
  display: none;
  z-index: 1000;
  overflow-y: scroll;
overflow-x: hidden;
  background-color: white;
}

在.popupContainer css内容中替换为

CSS - 溢出内部弹出

3 个答案: