如何適合沒有滾動屏幕？

這是我的代碼：

<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>

我的問題是如何適應屏幕而不滾動。因爲我將兩列col-sm-6劃分成2列x 4列，寬度大小合適。但是，身高很高。所以，瀏覽器會自動垂直顯示滾動條。如何降低身高以及如何適應屏幕。

來源

2017-06-22 user3214224

這不會是使用友好。但你仍然可以嘗試給你的主div包含行和列的高度爲100vh。 –

我試過但沒有區別 – user3214224

你應該真的，我的意思是_really_，使用CSS文件而不是重複內聯樣式。而@Rahul是正確的，將'height：100vh'設置爲您的主div會迫使它使用所有視口的高度。 –

默認情況下，如果未提及，canvas元素的寬度爲300px，高度爲150px。 Bootstrap對高度沒有影響。指定畫布的高度以調整高度

來源

2017-06-22 06:43:32

我的目標是如何縮放以適應瀏覽器屏幕內部。 – user3214224

OP會如何做到這一點？ –

您需要將偵聽器附加到畫布元素以調整大小。帆布元素期望高度和寬度，並且不會在沒有這個的情況下工作。因此，考慮添加監聽器，以便在屏幕大小更改和頁面加載時動態修改畫布的寬度和高度。 –

將height:100vh設置爲主容器將強制其使用視口中的所有可用區域。

現場演示（打開全屏）：

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

如何適合沒有滾動屏幕？

回答

相關問題