我试图将侧边栏扩展到内容的末尾，但没有成功。这是我的小提琴https://jsfiddle.net/DTcHh/18459/。有什么建议吗？
<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>
我的建议是使用flex
我为您创建了一个JSFiddle：在此处输入链接描述
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;
}