div den verbleibenden Raum füllen

Question

Ich habe dieses Beispiel:

link

HTML-Code:

<div class="row"> 
       <div class="col-md-push-8 col-md-4 small-menu"> 
        <a href="#" class="orange-menu">List your Property</a> 
        <ul class="list-inline"> 
         <li><a href="#">Travelor Login</a></li> 
         <li><a href="#">Owner Login</a></li> 
        </ul> 
       </div> 
      </div> 

CSS CODE:

.small-menu .orange-menu { 
     background: #ed7103; 
    font-size: 18px; 
    padding: 18px; 
    font-weight: 500; 
} 
a{ 
     display: inline-block; 
} 
.small-menu .list-inline { 
    overflow: auto; 
    background: rgba(31,106,138,0.7); 
    margin: 0px; 
    vertical-align: bottom; 
    display: inline-block; 
    padding: 14px; 
} 

Wie kann ich mak e div (".small-menu .list-inline") den ganzen verbleibenden Platz bis zum Ende zu besetzen?

I Elemente der gleichen Höhe halten wollen und Position

Können Sie mir helfen, dieses Problem zu lösen?

Vielen Dank im Voraus!

Answer 1

Flexbox das tun können:

.small-menu { 
 
    display: flex; 
 
    align-items: flex-end; 
 
} 
 
.small-menu .orange-menu { 
 
    background: #ed7103; 
 
    font-size: 18px; 
 
    padding: 18px; 
 
    font-weight: 500; 
 
} 
 
.small-menu .list-inline { 
 
    overflow: auto; 
 
    background: rgba(31, 106, 138, 0.7); 
 
    margin: 0px; 
 
    vertical-align: bottom; 
 
    flex: 1; 
 
    display: flex; 
 
    align-items: center; 
 
    padding: 14px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-md-push-8 col-md-4 small-menu"> 
 
    <a href="#" class="orange-menu">List your Property</a> 
 
    <ul class="list-inline"> 
 
     <li><a href="#">Travelor Login</a> 
 
     </li> 
 
     <li><a href="#">Owner Login</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

Ich glaube, Sie

width: 100%; 

hinzufügen müssen und Sie erhalten:

.small-menu .list-inline { 
    overflow: auto; 
    background: rgba(31,106,138,0.7); 
    margin: 0px; 
    vertical-align: bottom; 
    display: inline-block; 
    padding: 14px; 
    width: 100%; 
}