Javascript 如何在没有滚动的情况下调整屏幕？_Javascript_Html_Twitter Bootstrap 3

Javascript 如何在没有滚动的情况下调整屏幕？

javascript html twitter-bootstrap-3

Javascript 如何在没有滚动的情况下调整屏幕？,javascript,html,twitter-bootstrap-3,Javascript,Html,Twitter Bootstrap 3,我正在使用引导创建布局这是我的代码： <html> <head> <title>Test</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href

我正在使用引导创建布局

这是我的代码：

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


试验
身体{
背景色：#000000；
}

我的问题是如何在没有滚动的情况下适应屏幕。因为，我已经在每一行中划分了两个col-sm-6，它创建了2列x 4行，宽度的大小是可以的。但是，高度很高。所以，浏览器会自动垂直显示滚动条。如何降低高度以及如何适应屏幕。

默认情况下，画布元素的宽度为300px，高度为150px（如果未提及）。引导对高度没有影响。

指定画布的高度以调整高度设置主容器的高度：100vh将强制其使用视口中的所有可用区域

现场演示（全屏显示）：

body，html{
填充：0；
保证金：0；
}
.全屏{
高度：100vh；
背景：#添加8e6；
}


这里有什么内容吗

这不会是友好的使用方式。但是你仍然可以尝试给包含行和列的主div指定100vh的高度。我试过了，但是没有区别。你应该，我的意思是，使用CSS文件，而不是重复内联样式。@Rahul是正确的，将

height:100vh

设置到主div将强制它使用视口的所有高度。我的目标是如何缩放以适应浏览器屏幕内的大小。OP如何做到这一点？您需要将侦听器附加到画布元素以调整大小。Canvas元素需要高度和宽度，没有高度和宽度就无法工作。因此，考虑添加监听器来动态修改画布的宽度和高度，以改变屏幕的大小和页面的负载。@ JeremyThille，你能解释一下什么是OP？OP =原始海报，这是因特网上的一个泛泛而谈的术语，用来表示帖子或问题的作者。