スクロールなしで画面をどのようにフィットさせるのですか？

私はレイアウトを作成するためにブートストラップを使用しています。スクロールなしで画面をどのようにフィットさせるのですか？

これは私のコードです：

<html> 
    <head> 
     <title>Test</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <style> 
      body{ 
       background-color: #000000; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container-fluid" style="margin-top: 5px; margin-bottom: 15px;"> 
      <div class="row-fluid"> 
       <div class="col-sm-6" style="padding-top: 5px; padding-left: 5px; padding-right: 5px; border: 1px solid #373737;"> 
        <canvas></canvas> 
       </div> 
       <div class="col-sm-6" style="padding-top: 5px; padding-left: 5px; padding-right: 5px; border: 1px solid #373737;"> 
        <canvas></canvas> 
       </div> 
      </div> 
      <div class="row-fluid"> 
       <div class="col-sm-6" style="padding-top: 5px; padding-left: 5px; padding-right: 5px; border: 1px solid #373737;"> 
        <canvas></canvas> 
       </div> 
       <div class="col-sm-6" style="padding-top: 5px; padding-left: 5px; padding-right: 5px; border: 1px solid #373737;"> 
        <canvas></canvas> 
       </div> 
      </div> 
      <div class="row-fluid"> 
       <div class="col-sm-6" style="padding-top: 5px; padding-left: 5px; padding-right: 5px; border: 1px solid #373737;"> 
        <canvas></canvas> 
       </div> 
       <div class="col-sm-6" style="padding-top: 5px; padding-left: 5px; padding-right: 5px; border: 1px solid #373737;"> 
        <canvas></canvas> 
       </div> 
      </div> 
      <div class="row-fluid"> 
       <div class="col-sm-6" style="padding-top: 5px; padding-left: 5px; padding-right: 5px; border: 1px solid #373737;"> 
        <canvas></canvas> 
       </div> 
       <div class="col-sm-6" style="padding-top: 5px; padding-left: 5px; padding-right: 5px; border: 1px solid #373737;"> 
        <canvas></canvas> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

私の質問は、スクロールせずに画面に収まるようにする方法です。なぜなら、私は2つのcol-sm-6を各行に分割しているからです。2列のx 4行の幅のサイズは大丈夫です。しかし、高さは高いです。ブラウザは自動的にスクロールバーを垂直に表示します。どのように高さを減らすか、画面をどのようにフィットさせるか。

出典

2017-06-22 user3214224

これは文句を言わないことはやさしい使用可能。しかし、あなたは行と列を含むメインのdivに100vhの高さを与えることを試みることができます。 –

私は試しましたが、違いはありません – user3214224

インラインスタイルを繰り返す代わりに、CSSファイルを使用してください。そして、@ Rahulは正しく、メインのdivに 'height：100vh'を設定すると、ビューポートの高さのすべてを使用するよう強制されます。 –

デフォルトでは、キャンバス要素は、記載されていない場合は300pxの幅と150pxの高さをとります。ブートストラップは高さに影響を与えません。高さを調整するためにキャンバスの高さを指定する

出典

2017-06-22 06:43:32

私の目的は、ブラウザ画面に合わせて縮尺を調整する方法です。 – user3214224

OPはそれをどのようにして正確に行いますか？ –

サイズ変更のためにcanvas要素にリスナーを接続する必要があります。キャンバス要素は高さと幅を必要とし、それなしでは動作しません。キャンバスの幅と高さを画面サイズの変更やページの読み込みに動的に変更するためにリスナーを追加することを検討してください。 –

メイン容器に設定すると、ビューポート内のすべての使用可能領域が強制的に使用されます。

ライブデモは、（フルスクリーンそれを回す）：

body,html { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.fullscreen { 
 
    height: 100vh; 
 
    background: #add8e6; 
 
}

<div class="fullscreen"> 
 
\t Any content in here 
 
</div>

出典

2017-06-22 06:58:29

スクロールなしで画面をどのようにフィットさせるのですか？

答えて

関連する問題