固定高度边框

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

Answer 2

试试这个：

<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><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 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><a href="">Our Story</a></li>
        <li><a href="">Careers</a></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><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 class="verticalLine"></div>
  </div>

Answer 3

请尝试以下操作： 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

试试这个Create a outer container并应用overflow: hidden并将边距和填充应用到底部

http://www.bootply.com/YNUeK8I29h

Answer 5

您可以使用伪选择器之后/之前。 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;
}