<ul>元素不会调整高度以适应儿童<li>元素</li> </ul>

Question

我有<ul> height:100%，不调整自身大小以适应其所有子<li>元素。

发生了什么：

• 滚动查看问题，您可以看到<ul>的背景颜色未填充到上一个<li>的底部。

我希望看到的是什么：

• 一个可滚动的无序列表<ul>，它包围并包含所有<li>个元素。

其他信息：

• 通用包装器<div>包含<ul>的无序列表<li>，由标签<label>和输入<input>组成。所有这些都分别位于页眉和页脚之间，分别为<header>和<footer>。
  
  

您可以查看此CodePen here.

* {
  border: 0;
  font-family: "Lucida Console", Monaco, monospace
}
body {
  min-width: 1440px;
  height: 100%;
  //background: #bbb
}
header {
  width: 100%;
  height: 60px;
  background: #bada55;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  //opacity: .4;
}
footer {
  width: 100%;
  height: 100px;
  background: #bada55;
  margin: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  //opacity: .4;
}
ul,
li {
  list-style-type: none;
  color: #444;
  display: block;
}
label,
input {
  display: block;
  position: relative;
}
#wrap {
  background: #000;
  width: 40%;
  height: 100%;
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#question_list {
  width: 100%;
  min-width: 452px;
  height: 100%;
  background: #bada55;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.question {
  background: #ddd;
  width: 90%;
  height: 120px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0
}
.question label {
  font-size: 24px;
  text-align: center;
}
.question input {
  width: 284px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
  font-size: 24px;
  margin-top: 44px;
  margin-bottom: 24px
}
.space {
  width: 100%;
  height: 120px;
  background: #badff5
}

<header></header>
<div id="wrap">
  <ul id="question_list">
    <li id="space_0" class="space"></li>
    <li id="one" class="question">
      <label for="f_name">First Name</label>
      <input name="f_name" id="f_name" />
    </li>
    <li id="space_1" class="space"></li>
    <li id="two" class="question">
      <label for="l_name">Last Name</label>
      <input name="l_name" id="l_name" />
    </li>
    <li id="space_2" class="space"></li>
    <li id="three" class="question">
      <label for="age">Age</label>
      <input name="age" id="age" />
    </li>
    <li id="space_3" class="space"></li>
    <li id="four" class="question">
      <label for="address">Address</label>
      <input name="address" id="address" />
    </li>
    <li id="space_4" class="space"></li>
    <li id="five" class="question">
      <label for="degree">Degree</label>
      <input name="degree" id="degree" />
    </li>
    <li id="space_5" class="space"></li>
    <li id="six" class="question">
      <label for="exp">Years of Experience</label>
      <input name="exp" id="exp" />
    </li>
    <li id="space_6" class="space"></li>
  </ul>
</div>
<footer></footer>

Answer 1

为了达到预期的效果，您需要添加一个简单的css规则：

ul{
  overflow:auto;
}

您可以详细了解overflow css属性here

检查codePen demo