Fill upp eine ganze Box mit einem Knopf in Bootstrap

Question

Problem

einen ganzen Kastenbereiches mit einem Knopf Abdeckung mit Bootstrap und benutzerdefinierte CSS.

HTML

<div class="col-md-2"> 
    <div class="servive-block servive-block-orange"> 
    <div class="form-group"> 
     <button type="button" class="btn btn-primary form-control">SÖK</button> 
    </div> 
    </div> 
</div> 

CSS

.servive-block { 
    padding: 20px; 
    color: #000000; 
    margin-top: 10px; 
    height: 100px; 
} 

.servive-block-orange { 
    background: #e75113; 
} 

Minimal Arbeitsbeispiel (MWE)

https://jsfiddle.net/wubegbqb

Ausgabe

Wunsch Ausgang

die gesamte blaue Taste Sicherstellen, dass die div Bereich erstrecken und dass die Schaltfläche angeklickt werden kann.

Answer 1

Absolute Positionierung sollte funktionieren:

.servive-block { 
 
    color: #000000; 
 
    margin-top: 10px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 
.servive-block-orange { 
 
    background: #e75113; 
 
} 
 
.full-size { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<div class="col-md-2"> 
 
    <div class="servive-block servive-block-orange"> 
 
    <div class="form-group full-size"> 
 
     <button type="button" class="btn btn-primary form-control full-size">SÖK</button> 
 
    </div> 
 
    </div> 
 
</div>

Fiddle demo

Answer 2

Wenn Sie eine Höhe und Breite auf Ihrem Eltern-Div (.servive-Block) festgelegt haben, können Sie die Schaltfläche auf 100% Breite und 100% Höhe setzen.

.servive-block { 
    padding: 20px; 
    color: #000000; 
    margin-top: 10px; 
    height: 100px; 
    width:250px; 
} 

.servive-block .form-group { 
    width:100%; 
    height:100%; 
} 


.servive-block .form-group .btn { 
    width:100%; 
    height:100%; 
    display:block; 
}