Question

我正在使用bootstrap来创建布局。

这是我的代码：

<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行，宽度的大小是可以的。但是，身高很高。所以，浏览器会自动垂直显示滚动条。如何降低身高以及如何适应屏幕。

Answer 1

默认情况下，如果没有提到，canvas元素的宽度为300px，高度为150px。 Bootstrap对高度没有影响。指定画布的高度以调整高度

Answer 2

将height:100vh设置为主容器会强制它使用视口中的所有可用区域。

现场演示（全屏转动）：

＆＃13;

body,html {
  padding: 0;
  margin: 0;
}

.fullscreen {
  height: 100vh;
  background: #add8e6;
}

＆＃13;

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

＆＃13;

如何在没有滚动的情况下适合屏幕？

2 个答案: