I have markup:
i need to make .step
of 100% of parent container, how to accomplish that. html:
<div class="steps-container">
<div class="group">
<div class="step">
<ul class="sortable">
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
</ul>
</div>
<div class="step">
<ul class="sortable">
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
</ul>
</div>
<div class="step">
<ul class="sortable">
<li class="item">Item</li>
<li class="item">Item</li>
</ul>
</div>
</div>
</div>
css:
* {
margin: 0px;
padding: 0px;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
display: inline-block;
}
.sortable li {
margin: 0px;
padding: 0px;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: lightgrey;
}
.group {
display:inline-block;
border: 1px solid red;
}
.step {
border: 1px solid green;
display:inline-block;
background-color: yellow;
}
.item {
background-color: lightgray;
}
You could set position: relative;
to .group
and
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
to .step
I'm assuming you are showing only one .step
element at the time, am I wrong?
If you want .group to be 100% wide, you'll need these styles:
.group {
border: 1px solid red;
display:table; /* make the element 100% fill the entire available width */
width: 100%;
}
If you want .step to be equal height, you'll need these styles:
.step {
border: 1px solid green;
display:table-cell; /* make the element 100% of its parent's height/equal height columns */
background-color: yellow;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.