Question

我遇到了强制链接占用其父容器的完整高度的问题。

以下是我的代码的小提琴：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;
}

基本上，我想让灰色按钮（在右侧）占据盒子容器的全高。在编写时，我已经尝试将链接设置为显示块并将其高度设置为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>

Answer 2

只需使用btn-block课程，而不是乱搞div高度，如下所示：

<div class="col-md-3"><button class="btn btn-block" >Show Details</button></div>

链接按钮全高容器Bootstrap

2 个答案: