The <ul> on my page has a height:100%, but it doesn't dynamically adjust to fit all of its <li> child elements.
This is what's happening:
- When scrolling through the list, you'll notice that the background color for the
<ul>does not extend to the bottom of the last<li>.
This is what I want to happen:
- I'm looking for a scrollable
<ul>element that wraps around and contains all the<li>items.
Additional Information:
- There's a parent
<div>that encompasses the unordered list (<ul>) consisting of individual items in the form of a label<label>and an input field<input>. All of this content is positioned between a header (<header>) and footer (<footer>).
You can view the CodePen example 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>