CODEWITHSUNDEEP
csstwitter-bootstrap
Nicholas
Nicholas

Reputation: 299

Link button full height of container Bootstrap

I'm having issues forcing a link to take full height of its parent container.

Here is a Fiddle of my code: 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;
}

Basically, I want to make the gray button (on the right) take full height of the box container. As of writing, I've tried setting the link to display block and set its height to 100%, but with no avail.

Any ideas?

Upvotes: 1

Views: 3562

Answers (2)

Draško Kokić
Draško Kokić

Reputation: 1290

Just use the btn-block class instead of messing around with div heights, like this:

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

Upvotes: 0

austin wernli
austin wernli

Reputation: 1801

I changed box to 100px, and setup parent elements of the button to have 100% height

However, you still may want to take a look at http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm to understand how height:100%; is different from width:100%;. I'm guessing you believe they work the same.

@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>

Upvotes: 2

Related Questions