サイドバーをコンテンツの最後まで拡張するには？

私のサイドバーをコンテンツの最後まで拡張しようとしていますが、成功していません。これは私のフィドル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>

出典

2016-03-22 None

正確にはどういう意味ですか？あなたのすべてのコンテンツが表示されているようです。 –

同じ高さの2つのオブジェクトを作ることは、一般的なCSSの問題です。「Equal Column Height CSS」をグーグルで検索すると、説明やサンプルコードが表示されます。 – Edu

私は左側にサイドバーがあり、右側にコンテンツがあります...しかし、左側の背景色は最後まで伸びていません – None

私の提案は、あなたのために、私はJSFiddleを作成しましたflex

使用することです： 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; 
}

出典

2016-03-22 14:39:28

サイドバーをコンテンツの最後まで拡張するには？

答えて

関連する問題