ブラウザの高さに応じてdivの高さを設定します。

ブートストラップを使用してhtmlコードを作成します。しかし、私は問題があります。私はdivの高さをブラウザの高さに合わせて調整しません。私は知っているすべてを試しました。ブラウザの高さに応じてdivの高さを設定します。

divの高さブラウザの高さを調整するにはどうすればよいですか？ここで

は私のコードです：

body{ 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#leftMenu{ 
 
    height: 500px; 
 
} 
 

 
#viewport{ 
 
    height: 400px; 
 
    overflow: hidden; 
 
} 
 

 
#informationMenu{ 
 
    height: 100px; 
 
    overflow: scroll; 
 
} 
 

 
#rightMenu{ 
 
    height: 500px; 
 
}

<body> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="leftMenu" style="background-color: #cc0052" > 
 
      </div> 
 
      <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> 
 
       <div class="row" id="viewport" style="background-color: aquamarine"> 
 
       </div> 
 
       <div class="row" id="informationMenu" style="background-color: cadetblue"> 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="rightMenu" style="background-color: #bfff00"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

出典

2017-01-15 Şeyma Yaman

私たちはどの話をしていますか？ – LGSon

実際、leftMenuとrightMenuの高さは100％、ビューポートの高さは80％、informationMenuの高さは20％です。 –

このようなもの：https://jsfiddle.net/smbtcfwf/ ....はいの場合は、回答として投稿します。 – LGSon

あなたは高さvhを使用する必要があります。また、レスポンシブなデザインも備えています。 1hvは= 100vhはあなたが必要値になることを意味し、ビューポートの高さ（broswer）の1％、;）

編集：あなたは幅のために同じことをやろうとしている場合、あなたはのでvwの代わりvhを使用する必要がありますvhは身長を指し、vwは幅を指します）;

出典

2017-01-15 12:49:13

はい、それは高さのために働いていますが、現在は私の幅が動作していません:( –

幅の場合は 'vh'の代わりに' vw'を使用してください;） –

はい、それは私が望むように働いています。ありがとうございました:) –

ブラウザの高さに応じてdivの高さを設定します。

答えて

関連する問題