html - 固定高度边框

Question

你好我有三列需要一个固定高度的右边框，不取决于列中的元素数。

我的代码

html

<div class="col-sm-2">
    <div class="footer-col">
      <ul>
        <li class="footer-title hidden-xs">Customer Care</li>
        <li><a href="">Contact us</a></li>
        <li><a href="">Help</a></li>
        <li><a href="">Shipping</a></li>
        <li><a href="">Returns</a></li>
        <li><a href="">Size Guide</a></li>
      </ul>
    </div>
  </div>
  <div class="col-sm-2 hidden-xs">
    <div class="footer-col">
      <ul>
        <li class="footer-title">About Us</li>
        <li><a href="">Our Story</a></li>
        <li><a href="">Careers</a></li>
      </ul>
    </div>
  </div>
  <div class="col-sm-2 hidden-xs">
    <div class="footer-col">
      <ul>
        <li class="footer-title">Shortcuts</li>
        <li><a href="">My Account</a></li>
        <li><a href="">Store Locator</a></li>
        <li><a href="">Gift Cards</a></li>
        <li><a href="">Payment</a></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/

有两件事:

1) 将 ul 高度设置为 100% 2)将高度设置为父级或父级的父级。在本例中，它是包装器。

或者使用表格，那么你必须固定宽度而不是高度。

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;
}