HTMLサイドバーのメインセクションと同じ高さ

Question

私のウェブページには、サイドバーセクションとメインコンテンツセクションがあり、2つのセクションの高さは決して等しくありません（ブラウザのサイズによって異なります）。

ウェブページhereが表示されます。

ブラウザのサイズに関係なく、両方のセクションの高さを同じにするにはどうすればよいですか？

私のサイドバーセクションはクラス.sidebarで、メインセクションはクラス.mainです。

助けていただければ幸いです。

<div class="row" style="margin-right:0px"> 
      <!-- SIDBAR --> 
      <div class="col-sm-3 col-md-2 sidebar" style="height: 141vh;bottom: initial;"> 
       <h3>Request a quote</h3> 
       <p>To obtain a quotation simply take two minutes to complete our form. Our policies are all underwritten by AVIVA Insurance and arranged through Residentsline Limited. </p> 
       <img src="http://dandoquote.iwobi.image-plus.co.uk/images/residentsline-insurance-brokers.png" class="img-responsive residents-line-logo-sidebar img-thumbnail" alt="Responsive image"> 
      </div> 
      <!-- MAIN--> 
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main get-a-quote-page" style="height:100%"> 


       <form method="POST" action="http://dandoquote.iwobi.image-plus.co.uk/quote-summary" accept-charset="UTF-8" id="quote-request-form" class="form-horizontal quote-request-form"><input name="_token" type="hidden" value="SP51CFwKItIrZli4AGf2H4GxhlXz7ofV6eAJibTU"> 



       <div class="form-group"> 
        <label for="units" class="col-md-2 control-label" placeholder="#">Number of flats or properties</label> 

        <div class="col-md-4"> 
         <input class="form-control" name="units" type="number" id="units"> 
        </div> 
       </div> 


       <div class="form-group"> 
        <label for="limit_of_indemnity" class="col-md-2 control-label">Limit of indemnity</label> 
        <div class="col-md-4"> 
         <select class="form-control" id="limit_of_indemnity" name="limit_of_indemnity"><option value="100000">£100,000</option><option value="250000">£250,000</option><option value="500000">£500,000</option><option value="1000000">£1,000,000</option><option value="2000000">£2,000,000</option></select> 
        </div> 
       </div> 

      <div class="form-group"> 
       <label for="title" class="col-md-2 control-label">Title</label> 

       <div class="col-md-4"> 
        <select class="form-control" id="title" name="title"><option value="Mr">Mr</option><option value="Mrs">Mrs</option><option value="Miss">Miss</option><option value="Ms">Ms</option><option value="Dr">Dr</option></select> 
       </div> 
      </div> 


      <div class="form-group"> 
       <label for="block_address_county" class="col-md-2 control-label">County</label> 
        <div class="col-md-4"> 
         <input class="form-control" placeholder="County" name="block_address_county" type="text" id="block_address_county"> 

        </div> 
      </div> 
      <div class="form-group"> 
       <label for="block_address_post_code" class="col-md-2 control-label">Post Code</label> 
        <div class="col-md-4"> 
         <input class="form-control" placeholder="Post Code" name="block_address_post_code" type="text" id="block_address_post_code"> 

        </div> 
      </div> 



      <div class="form-group"> 
       <div class="col-md-offset-2 col-md-10"> 
        <input class="btn btn-primary btn-quote-submit" type="submit" value="Submit"> 
       </div> 
      </div> 

     </form> 


     </div> 
    </div> 

Answer 1

理由は、あなたの.sidebar固定height: 141vhと.mainheight: 100%を与えています。

.mainの高さは.mainと同じで、同じ高さにしたいので、.mainもheight: 100%であることを意味します。

Answer 2

.sidebarからインラインスタイル属性を削除する必要はありません。 .row親クラスに.myclassを追加し、その下にルールを追加します。 .sidebarからも

.myclass { 
    display: flex; 
    flex-direction: row; 
    align-items: stretch; 
} 

、2つのdivに最後に

.sidebar { 
    z-index: 1000; 
    display: block; 
    padding: 20px; 
    background-color: #4b6db9; 
    border-right: 1px solid #eee; 
} 

のように見えるように、彼らがどのように見えるので、unnecesaryクラスを削除し、すべての位置のプロパティを削除します。

テスト済み

<div class="col-sm-3 col-md-2 sidebar"> 
<div class="col-sm-9 col-md-10 main get-a-quote-page"> 

、作品。

Answer 3

Flexのオプションを利用します。これらの2つのクラスの周りのdivの上

display: flex; 

が使用これを。
そしてこれが彼らと同じ高さにする必要がありますあなたの.mainと.sidebarクラス

にflex: 1;を入れて！

Answer 4

CSS Flexboxを使用できます。しかし、レイアウト内のいくつかのクラスを変更する必要があります。

/* Flex Container */ 
 
.layout-holder { 
 
    display: flex; 
 
} 
 

 
/* Sidebar (Left) */ 
 
.sidebar { 
 
    width: 35%; 
 
    background: skyBlue; 
 
    padding: 20px; 
 
} 
 

 
/* Main Layout (Right) */ 
 
.main { 
 
    flex: 1; 
 
    background: #eee; 
 
    padding: 20px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="layout-holder"> 
 
      <!-- SIDBAR --> 
 
      <div class="sidebar"> 
 
       <h3>Request a quote</h3> 
 
       <p>To obtain a quotation simply take two minutes to complete our form. Our policies are all underwritten by AVIVA Insurance and arranged through Residentsline Limited. </p> 
 
       <img src="http://dandoquote.iwobi.image-plus.co.uk/images/residentsline-insurance-brokers.png" class="img-responsive residents-line-logo-sidebar img-thumbnail" alt="Responsive image"> 
 
      </div> 
 
      <!-- MAIN--> 
 
      <div class="main get-a-quote-page"> 
 

 

 
       <form method="POST" action="http://dandoquote.iwobi.image-plus.co.uk/quote-summary" accept-charset="UTF-8" id="quote-request-form" class="form-horizontal quote-request-form"><input name="_token" type="hidden" value="SP51CFwKItIrZli4AGf2H4GxhlXz7ofV6eAJibTU"> 
 

 

 

 
       <div class="form-group"> 
 
        <label for="units" class="col-md-2 control-label" placeholder="#">Number of flats or properties</label> 
 

 
        <div class="col-md-4"> 
 
         <input class="form-control" name="units" type="number" id="units"> 
 
        </div> 
 
       </div> 
 

 

 
       <div class="form-group"> 
 
        <label for="limit_of_indemnity" class="col-md-2 control-label">Limit of indemnity</label> 
 
        <div class="col-md-4"> 
 
         <select class="form-control" id="limit_of_indemnity" name="limit_of_indemnity"><option value="100000">£100,000</option><option value="250000">£250,000</option><option value="500000">£500,000</option><option value="1000000">£1,000,000</option><option value="2000000">£2,000,000</option></select> 
 
        </div> 
 
       </div> 
 

 
      <div class="form-group"> 
 
       <label for="title" class="col-md-2 control-label">Title</label> 
 

 
       <div class="col-md-4"> 
 
        <select class="form-control" id="title" name="title"><option value="Mr">Mr</option><option value="Mrs">Mrs</option><option value="Miss">Miss</option><option value="Ms">Ms</option><option value="Dr">Dr</option></select> 
 
       </div> 
 
      </div> 
 

 

 
      <div class="form-group"> 
 
       <label for="block_address_county" class="col-md-2 control-label">County</label> 
 
        <div class="col-md-4"> 
 
         <input class="form-control" placeholder="County" name="block_address_county" type="text" id="block_address_county"> 
 

 
        </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label for="block_address_post_code" class="col-md-2 control-label">Post Code</label> 
 
        <div class="col-md-4"> 
 
         <input class="form-control" placeholder="Post Code" name="block_address_post_code" type="text" id="block_address_post_code"> 
 

 
        </div> 
 
      </div> 
 

 

 

 
      <div class="form-group"> 
 
       <div class="col-md-offset-2 col-md-10"> 
 
        <input class="btn btn-primary btn-quote-submit" type="submit" value="Submit"> 
 
       </div> 
 
      </div> 
 

 
     </form> 
 

 

 
     </div> 
 
    </div>

・ホープ、このことができます：

は、以下のスニペットを見てください！