Кнопка ссылки на всю высоту контейнера Bootstrap

У меня возникают проблемы с принудительным размещением ссылки на всю высоту родительского контейнера.

Вот скрипт моего кода: 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%, но безрезультатно.

Любые идеи?


css twitter-bootstrap
person Nicholas    schedule 12.01.2015    source источник
comment
Вы говорите height: 100%;, но нигде не устанавливаете фактическую высоту, чтобы проценты работали.   -  person austin wernli    schedule 12.01.2015
comment
Вы можете взглянуть на это, чтобы лучше понять webdesign.about.com/od/csstutorials/f/   -  person austin wernli    schedule 12.01.2015
comment
Если я установлю фиксированную высоту в пикселях для контейнера, ссылка все равно не займет его полную высоту.   -  person Nicholas    schedule 12.01.2015

Ответы (2)


arrow_upward
2
arrow_downward

Я изменил поле на 100 пикселей и установил высоту родительских элементов кнопки на 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>

person austin wernli    schedule 12.01.2015

arrow_upward
0
arrow_downward

Просто используйте класс btn-block вместо того, чтобы возиться с высотой div, например:

<div class="col-md-3"><button class="btn btn-block" >Show Details</button></div>
person Draško Kokić    schedule 29.03.2017