如何适合没有滚动屏幕？

这是我的代码：

<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

如何适合没有滚动屏幕？

回答

相关问题