css - 容器 Bootstrap 的链接按钮全高

Question

我在强制链接占据其父容器的全高时遇到问题。

这是我的代码的 fiddle :http://jsfiddle.net/z2ua5g4j/

a > span.button-single {
    font-size: 30px;
    color: #fff;
    display: block;
    margin-bottom: 8px;
    margin-left: 0px;
}

.box {
    background-color: #f5f5f5;
    border: 1px solid #dcdcdc;
    height: 100%;
}

.box h1 {
    color: #667477;
    font-size: 24px;
    margin-left: 20px;
}

.box p {
    color: #b1b1b1;
    font-size: 13px;
    margin-left: 20px;  
    margin-bottom: 20px;  
}

.box a.button {
    width: 95px;
    background-color: #b4b4b4;
    margin-right:-1px;
    color: #fff;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 15px;
    line-height: 16px;
    text-align: center;
    float: right;
    height: 100%;
    display: block;
}

.box a.button:hover {
    text-decoration: none;
    background-color: #a7a7a7;
}

基本上，我想让灰色按钮(在右边)占据盒子容器的整个高度。在撰写本文时，我已尝试将链接设置为显示 block 并将其高度设置为 100%，但无济于事。

有什么想法吗？

Answer 1

我将框更改为 100px，并将按钮的父元素设置为具有 100% 的高度

但是，您可能还想看一下 http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm了解 height:100%; 与 width:100%; 有何不同。我猜你认为它们的工作原理相同。

@import url("http://getbootstrap.com/dist/css/bootstrap.min.css");

a > span.button-single {
    font-size: 30px;
    color: #fff;
    display: block;
    margin-bottom: 8px;
    margin-left: 0px;
}

.box {
    background-color: #f5f5f5;
    border: 1px solid #dcdcdc;
    height: 100px;
}

.box h1 {
    color: #667477;
    font-size: 24px;
    margin-left: 20px;
}

.box p {
    color: #b1b1b1;
    font-size: 13px;
    margin-left: 20px;  
    margin-bottom: 20px;  
}

.box a.button {
    width: 95px;
    background-color: #b4b4b4;
    margin-right:-1px;
    color: #fff;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 15px;
    line-height: 16px;
    text-align: center;
    float: right;
    height: 100%;
    display: block;
}

.box a.button:hover {
    text-decoration: none;
    background-color: #a7a7a7;
}

.row{
 height: 100%;   
}

<div class="box">
    <div class="row">
        <div class="col-sm-10">
            <h1>Title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum purus ut pretium ultricies. Cras pulvinar tincidunt lorem, ut posuere risus mollis in. Fusce pharetra urna nec sagittis suscipit.</p>
        </div>
        <div class="col-sm-2" style="height:100%;">
            <a href="#" class="button"><span class="button-single glyphicon glyphicon-plus-sign"></span> More<br/>Details</a>
        </div>
    </div>
</div>