ブートストラップ：他のコラムのコンテンツの高さを取る1列サイドバー

ブートストラップを使用して、左側のサイドバーを右側のコンテンツの高さに合わせようとしています。私は曖昧に似た問題を抱える少数の人を見ましたが、右側のコンテンツのサイズに関係なく機能するソリューションはありません。ブートストラップ：他のコラムのコンテンツの高さを取る1列サイドバー

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap Sidebar</title> 

    <!-- Bootstrap --> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"> 
<style> 
    html,body { 
     height:100%; 
     background-color:#000; 
    } 
    .container { 
     height:100%; 
    } 
    .main-row { 
     margin-left:0; 
     margin-right:0; 
    } 
    .fill { 
     width:100%; 
     height:100%; 
     min-height:100%; 
     padding:0px; 
    } 
    .sidebar 
    { 
     background: #F0F0F0; 
     height:100%; 
     min-height:100%; 
    } 
    .main-content-area 
    { 
     background: #fff; 
    } 
</style> 


</head> 
<body> 

    <div class="row main-row fill"> 
    <div class="col-sm-2 sidebar hidden-xs"> 
     <h3>Navigation</h3> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="col-sm-10 col-xs-12 main-content-area"> 
     <h1 class="page-header">Content</h1> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="col-sm-5 col-xs-12 main-content-area"> 
     <h1 class="page-header">Content</h1> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="col-sm-5 col-xs-12 main-content-area"> 
     <h1 class="page-header">Content</h1> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="col-sm-10 col-xs-12 main-content-area"> 
     <h1 class="page-header">Content</h1> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="col-sm-5 col-xs-12 main-content-area"> 
     <h1 class="page-header">Content</h1> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="col-sm-5 col-xs-12 main-content-area"> 
     <h1 class="page-header">Content</h1> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="col-sm-10 col-xs-12 main-content-area"> 
     <h1 class="page-header">Content</h1> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="col-sm-5 col-xs-12 main-content-area"> 
     <h1 class="page-header">Content</h1> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="col-sm-5 col-xs-12 main-content-area"> 
     <h1 class="page-header">Content</h1> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="col-sm-10 col-xs-12 main-content-area"> 
     <h1 class="page-header">Content</h1> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="col-sm-5 col-xs-12 main-content-area"> 
     <h1 class="page-header">Content</h1> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="col-sm-5 col-xs-12 main-content-area"> 
     <h1 class="page-header">Content</h1> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="col-sm-10 col-xs-12 main-content-area"> 
     <h1 class="page-header">Content</h1> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="col-sm-5 col-xs-12 main-content-area"> 
     <h1 class="page-header">Content</h1> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="col-sm-5 col-xs-12 main-content-area"> 
     <h1 class="page-header">Content</h1> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
</div> 


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
</body> 
</html>

いくつかの解決策が提案するように私はこの使用してCSSを解決するための理想的ではなく、jQueryのをしたいと思います。私はそれが可能であると確信している、ちょうど方法がわからない。

ご協力いただきありがとうございます。

EDIT：提案として、私は私の構造を見直している：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap Sidebar</title> 

    <!-- Bootstrap --> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"> 
    <style> 
     html,body { 
      height:100%; 
      background-color:#000; 
     } 
     .container { 
      height:100%; 
     } 
     .main-row { 
      margin-left:0; 
      margin-right:0; 
     } 
     .fill { 
      width:100%; 
      height:100%; 
      min-height:100%; 
      padding:0px; 
     } 
     .sidebar 
     { 
      background: #F0F0F0; 
      height:100%; 
      min-height:100%; 
     } 
     .main-content-area 
     { 
      background: #fff; 
     } 
    </style> 


</head> 
<body> 

    <div class="row main-row fill"> 
    <div class="col-sm-2 sidebar hidden-xs"> 
     <h3>Navigation</h3> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="col-sm-10 col-xs-12 main-content-area"> 
     <div class="row main-row fill"> 
      <div class="col-sm-12 col-xs-12 main-content-area"> 
       <h1 class="page-header">Content</h1> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
      </div> 
     </div> 

     <div class="row main-row fill"> 
      <div class="col-sm-12 col-xs-12 main-content-area"> 
       <h1 class="page-header">Content</h1> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
      </div> 
     </div> 

     <div class="row main-row fill"> 
      <div class="col-sm-12 col-xs-12 main-content-area"> 
       <h1 class="page-header">Content</h1> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
      </div> 
     </div> 

     <div class="row main-row fill"> 
      <div class="col-sm-12 col-xs-12 main-content-area"> 
       <h1 class="page-header">Content</h1> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
      </div> 
     </div> 

     <div class="row main-row fill"> 
      <div class="col-sm-12 col-xs-12 main-content-area"> 
       <h1 class="page-header">Content</h1> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
      </div> 
     </div> 

     <div class="row main-row fill"> 
      <div class="col-sm-12 col-xs-12 main-content-area"> 
       <h1 class="page-header">Content</h1> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
      </div> 
     </div> 


     <div class="row main-row fill"> 
      <div class="col-sm-12 col-xs-12 main-content-area"> 
       <h1 class="page-header">Content</h1> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
       <p>Content</p> 
      </div> 
     </div> 
    </div> 
</div> 


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
</body> 
</html>

問題が解決しないようです... :(

出典

2017-05-10 jcbmb

CSSは、DOMのトップを得るような機能のために、スタイルのためでありますあなたはjQueryのにheight()メソッドを使用することができます。

をCSSで要素、あなたがCSSで行うことができますが、DOM要素の高さを設定することで、DOM要素の高さを取得することは不可能である。

推奨：Jqueryを使用するにはheight（）メソッドしか必要ありません。

出典

2017-05-10 17:24:00

ありがとう、私はJSを使用しないようにしようとしている、私はこれを行う方法があると確信している...実際にはない場合はそれに頼るかもしれない... – jcbmb

@jcbmbグリッドをデザインした方法がこの問題の原因と思われます。

2つのカラム（サイドバー、コンテンツ）
にページは、次に下に複数の行と別のコンテンツのdiv

にいくつかの構造を2列に分割する第一の分割：

div.row 
div.col-sm-2 //sidebar 
div.col-sm-10 //content 
    div.row 
    div.col-sm-6 //content cell 
    div.col-sm-6 //content cell 
    div.row 
    div.col-sm-6 //content cell 
    div.col-sm-6 //content cell 
... ...

注：col-sm-6をcol-sm-5で除算すると、等しく分割する必要があります。

出典

2017-05-10 17:39:47 user2648008

あなたの提案に感謝、私は私の構造提案されているように問題は解決しません。... :( 質問の編集を参照してください。 – jcbmb

ブートストラップ：他のコラムのコンテンツの高さを取る1列サイドバー

答えて

関連する問題