Fixed height border - html

Question

Hello I have three columns that need a right border with a fixed height, not depending on the number of items in the column.
My code
html
<div class="col-sm-2">
<div class="footer-col">
<ul>
<li class="footer-title hidden-xs">Customer Care</li>
<li>Contact us</li>
<li>Help</li>
<li>Shipping</li>
<li>Returns</li>
<li>Size Guide</li>
</ul>
</div>
</div>
<div class="col-sm-2 hidden-xs">
<div class="footer-col">
<ul>
<li class="footer-title">About Us</li>
<li>Our Story</li>
<li>Careers</li>
</ul>
</div>
</div>
<div class="col-sm-2 hidden-xs">
<div class="footer-col">
<ul>
<li class="footer-title">Shortcuts</li>
<li>My Account</li>
<li>Store Locator</li>
<li>Gift Cards</li>
<li>Payment</li>
</ul>
</div>
</div>

Answer 1

.wrapper {
display: inline-block;
background-color: #000000;
width: 100%;
height: 150px;
color: #999999;
}
.col-sm-2 {
float: right;
margin: 0;
width: 32%;
display: inline-block;
height: 90%;
}
.footer-col {
float: right;
margin: 0;
width: 90%;
padding-left: 10px;
display: inline-block;
height: 90%;
}
ul {
display: inline-block;
width: 90%;
height: 100%;
border-right: 1px solid #999999;
list-style: none;
}
li a {
color: #FFFFFF;
}
https://jsfiddle.net/michaelyuen/72dc7xrd/
There are two things:
1) Set ul height to 100%
2) Set height to parent or parent's parent. In this case, it's the wrapper.
OR use table, then you have to fix width instead of height.
https://jsfiddle.net/michaelyuen/72dc7xrd/1/
.wrapper {
display: table-row;
background-color: #000000;
color: #999999;
}
.col-sm-2 {
margin: 0;
padding-left: 10px;
width: 150px;
display: table-cell;
height: 90%;
border-right: 1px solid #999999;
vertical-align: top;
}
.footer-col {
margin: 0;
width: 90%;
display: inline-block;
height: 90%;
}
ul {
display: block;
margin: 0;
padding: 0;
width: 90%;
height: 100%;
list-style: none;
}
li a {
color: #FFFFFF;
}

Answer 2

Try this:
<style>
.verticalLine {
border-left: thick solid #E2C4C4;
margin-top:6px;
width:5px;
height:50px;
left: 408px;
position: absolute;
}
.pull_left {
float:left;
}
.clear {
clear: both;
}
</style>
<div class="col-sm-2">
<div class="footer-col pull_left">
<ul>
<li class="footer-title hidden-xs">Customer Care</li>
<li>Contact us</li>
<li>Help</li>
<li>Shipping</li>
<li>Returns</li>
<li>Size Guide</li>
</ul>
</div>
<div class="verticalLine pull_left"></div>
</div>
<div class="clear"></div>
<div class="col-sm-2 hidden-xs">
<div class="footer-col pull_left">
<ul>
<li class="footer-title">About Us</li>
<li>Our Story</li>
<li>Careers</li>
</ul>
</div>
<div class="verticalLine pull_left"></div>
</div>
<div class="clear"></div>
<div class="col-sm-2 hidden-xs">
<div class="footer-col pull_left">
<ul>
<li class="footer-title">Shortcuts</li>
<li>My Account</li>
<li>Store Locator</li>
<li>Gift Cards</li>
<li>Payment</li>
</ul>
</div>
<div class="verticalLine"></div>
</div>

Answer 3

Try like this: Demo
.col .well {
margin-bottom: -99999px;
padding-bottom: 99999px;
border-right:1px solid #ddd !important;
}
.col-wrap {
overflow: hidden;
}
.well {
min-height:20px;
padding:19px;
margin-bottom:20px;
background:transparent !important;
border-right:1px solid #e3e3e3 !important;
border:none !important;
box-shadow:none !important;
}
HTML:
<div class="container">
<div class="row col-wrap">
<div class="col-sm-2 col">
<div class="footer-col well">
....
</div>
</div>
<div class="col-sm-2 hidden-xs col">
<div class="footer-col well">
....
</div>
</div>
<div class="col-sm-2 hidden-xs col">
<div class="footer-col well">
....
</div>
</div>
</div>
</div>

Answer 4

Try this Create a outer container and apply overflow: hidden and apply margin and padding to the bottom
http://www.bootply.com/YNUeK8I29h

Answer 5

You can use after/before pseudo selectors.
http://jsfiddle.net/s7w4sqLd/
.footer-col ul:after {
position:absolute;
content:" ";
left:0;
top:0;
width:100%;
height:50px;
border-right: solid 1px #2a343f;
}
.footer-col ul{
position:relative;
float:left;
padding-right:10px;
}
.footer-col ul li {
list-style:none;
}