Kenar çubuğunun içeriği sonuna nasıl genişletilir?

Question

Kenar çubuğumun içeriğini sonuna kadar genişletmeye çalışıyorum ama başarılı olmayın. Bu benim keman https://jsfiddle.net/DTcHh/18459/. Herhangi bir öneri ?

<section class="tabs"> 
    <div class="col-md-4 col-sm-4 col-xs-12 no-padding-right no-padding-left"> 
     <div class="left-sidebar"> 
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
       <div class="panel panel-default"> 
        <div class="left_sidebar_menu" role="tab" id="category"> 
         <h4 class="panel-title"> 
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
          Tourism <i class="indicator arrow-down-icon mt5 fa fa-angle-down pull-right"></i> 
          </a> 
         </h4> 
        </div> 
        <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="toursim"> 
         <div class="panel-body"> 
          <!-- Nav tabs --> 
          <ul class="info-menu" role="tablist"> 
           <li role="presentation" class="active"><a href="#1" aria-controls="home" role="tab" data-toggle="tab">ACCOMMODATION IN ZURICH <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#2" aria-controls="profile" role="tab" data-toggle="tab">MEETINGS AND CONGGRESSES <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#3" aria-controls="messages" role="tab" data-toggle="tab">ZURICH AS A TOURIST DESTINATION <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#4" aria-controls="settings" role="tab" data-toggle="tab">TRAVEL INFROMATION AND SERVICE <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#5" aria-controls="settings" role="tab" data-toggle="tab">LINKS <i class="fa fa-angle-right"></i></a></li> 

          </ul>       
         </div> 
        </div> 
       </div> 
       <div class="panel panel-default"> 
        <div class="left_sidebar_menu" role="tab" id="living"> 
         <h4 class="panel-title"> 
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> 
          Living <i class="indicator arrow-down-icon mt5 fa fa-angle-down pull-right"></i> 
          </a> 
         </h4> 
        </div> 
        <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="category"> 
         <div class="panel-body"> 
          <!-- Nav tabs --> 
          <ul class="info-menu" role="tablist"> 
           <li role="presentation" class="active"><a href="#7" aria-controls="home" role="tab" data-toggle="tab">ULTIMATE QUALITY OF LIFE <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#8" aria-controls="profile" role="tab" data-toggle="tab">LEISURE, SPORT AND CULTURE <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#9" aria-controls="messages" role="tab" data-toggle="tab">FINDING ACCOMODATION <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#10" aria-controls="settings" role="tab" data-toggle="tab">ENTRY, REGISTRATION AND RESIDE <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#11" aria-controls="settings" role="tab" data-toggle="tab">SCHOOLS & EMPLYMENT <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#12" aria-controls="settings" role="tab" data-toggle="tab">NEW IN ZURICH <i class="fa fa-angle-right"></i></a></li> 

          </ul>       
         </div> 
        </div> 
       </div> 
       <div class="panel panel-default"> 
        <div class="left_sidebar_menu" role="tab" id="living"> 
         <h4 class="panel-title"> 
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseTwo"> 
          Economy <i class="indicator arrow-down-icon mt5 fa fa-angle-down pull-right"></i> 
          </a> 
         </h4> 
        </div> 
        <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="economy"> 
         <div class="panel-body"> 
          <!-- Nav tabs --> 
          <ul class="info-menu" role="tablist"> 
           <li role="presentation" class="active"><a href="#13" aria-controls="home" role="tab" data-toggle="tab">LABOUR MARKET & JOB-HUNTING <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#14" aria-controls="profile" role="tab" data-toggle="tab">SETTING UP A COMPANY <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#15" aria-controls="messages" role="tab" data-toggle="tab">ZURICH AS A BUSINESS LOCATION <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#16" aria-controls="settings" role="tab" data-toggle="tab">TAXES <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#17" aria-controls="settings" role="tab" data-toggle="tab">PERMITS <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#18" aria-controls="settings" role="tab" data-toggle="tab">FINDING SOMEWHERE TO LIVE <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#19" aria-controls="settings" role="tab" data-toggle="tab">SME <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#20" aria-controls="settings" role="tab" data-toggle="tab">ECONOMIC STRUCTURE: STATISTICS <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#21" aria-controls="settings" role="tab" data-toggle="tab">LINKS <i class="fa fa-angle-right"></i></a></li> 

          </ul>       
         </div> 
        </div> 
       </div> 
       <div class="panel panel-default"> 
        <div class="left_sidebar_menu" role="tab" id="living"> 
         <h4 class="panel-title"> 
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour"> 
          Education <i class="indicator arrow-down-icon mt5 fa fa-angle-down pull-right"></i> 
          </a> 
         </h4> 
        </div> 
        <div id="collapseFour" class="collapse" role="tabpanel" aria-labelledby="education"> 
         <div class="panel-body"> 
          <!-- Nav tabs --> 
          <ul class="info-menu" role="tablist"> 
           <li role="presentation" class="active"><a href="#22" aria-controls="home" role="tab" data-toggle="tab">RANGE OF EDUCATION ON OFFER <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#23" aria-controls="profile" role="tab" data-toggle="tab">STUDENT ACCOMMODATION <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#24" aria-controls="messages" role="tab" data-toggle="tab">FINANCE & SCHOLERSHIPS <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#25" aria-controls="settings" role="tab" data-toggle="tab">ENTRY, VISAS, HEALTH INSURANCE <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#26" aria-controls="settings" role="tab" data-toggle="tab">GOING OUT <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#27" aria-controls="settings" role="tab" data-toggle="tab">JOB PORTALS <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#28" aria-controls="settings" role="tab" data-toggle="tab">PROFESIONAL APPRENTICESHIP SY <i class="fa fa-angle-right"></i></a></li> 
           <li role="presentation"><a href="#29" aria-controls="settings" role="tab" data-toggle="tab">LINKS<i class="fa fa-angle-right"></i></a></li> 

          </ul>       
         </div> 
        </div> 
       </div> 
      </div> 

     </div> 
    </div> 
    <div class="col-md-8 col-sm-8 col-xs-12"> 
     <div class="right-content"> 
      <div class="tab-content"> 
       <div role="tabpanel" class="tab-pane active" id="1"> 
        <span class="right_content_title">Tourism in Zurich</span> 
        <p class="start"> 
         Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. 
        </p> 
        <div class="small_image"> 
         <img src="img/tourism.png" /> 
        </div> 
        <span class="right_content_subtitle">ACCOMMODATION IN ZURICH</span> 
        <p class="story"> 
         Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus</p> 
         <span class="right_content_subtitle">ACCOMMODATION IN ZURICH</span> 
        <p class="story"> 
         Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus</p> 
         <span class="right_content_subtitle">ACCOMMODATION IN ZURICH</span> 
        <p class="story"> 
         Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus</p> 
       </div> 
      </div> 
     </div> 
    </div> 
    </section> 

Answer 1

Önerim sizin için bir JSFiddle oluşturduk flex

kullanmaktır: enter link description here

HTML:

<div class="flex" > 
    <div class="flex-1 margin-r-15 bg-gray"> 
    <div class="height-300 border-1px" > 
    </div> 
    </div> 
    <div class="flex-1 border-1px"> 
    </div> 
</div> 

CSS:

.flex{ 
    display:flex; 
} 
.flex-1{ 
    flex:1; 
} 
.height-300{ 
    height:300px; 
} 
.margin-r-15{ 
    margin-right:15px; 
} 
.bg-gray{ 
    background-color:gray; 
} 
.border-1px{ 
    border:1px solid black; 
}