全屏引导网页只占显示的一半
Tom*_* N. 0 html css bootstrap-4
我正在尝试创建一个非常基本的 CMS 版本，我正在使用一个页面，该页面提供一个 html 模板，并允许用户创建自己的文本和图像上传，以在其他地方的显示器上显示他们创建的屏幕。
该模板有效，它存储了它应该存储的内容，但我的问题是：
当我将模板发送到它自己的网页以在另一个屏幕（计算机、电视、电话等）上查看时，整个页面只显示在屏幕的左半部分，无论如何都是屏幕的一半。
为了安全起见，我尝试删除所有外部 CSS 和脚本，但这没有区别。唯一的区别是，从模板页面中，我正在删除我的全局导航菜单，该菜单包含页面上的所有内容，但我只希望此网页（使用引导程序 4 网格）填充页面
它在模板中的图片：
并生活：
我只是想让页面的主体填充它是任何设备的整个视口，但它只是填充了一半，这很奇怪。我在这里做错了什么很明显吗？
<!DOCTYPE html>
<html>
<head>
<title>Template One</title>
<style type="text/css">
html,
body {
height: 100vh;
width: 100vh;
}
.my-container {
display: flex;
flex-direction: column;
height: 100vh;
width:100vh;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #929292 ;
color: white;
text-align: center;
}
.my-container>.middle {
flex-grow: 1;
padding:30px;
background-image: url('images/bg6.jpg');
background-size: cover;
}
.my-container>.middle>* {
}
#clock{
/*background-color:#333;*/
font-family: sans-serif;
font-size:40px;
text-shadow:0px 0px 1px #fff;
color:#fff;
}
#clock span {
color:#fff;
font-size:40px;
position:relative;
}
#date {
margin-top: -10px;
letter-spacing:3px;
font-size:20px;
font-family:arial,sans-serif;
color:#fff;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>
</head>
<body onload="startTime()">
<!-- Container -->
<div class="container-fluid my-container">
<!-- Top Row -->
<div class="row top">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-3">
<img style="height: 100px;width: 250px;" src="/images/img.svg">
</div>
<div class="col-lg-6">
<a class="weatherwidget-io" href="https://forecast7.com/en/35d16n84d88/?unit=us" data-label_1="" data-label_2="WEATHER" data-days="3" data-theme="original" data-basecolor="" > WEATHER</a>
</div>
<div class="col-lg-3 align-self-center">
<div id="clockdate">
<div class="clockdate-wrapper">
<div id="clock"></div>
<div id="date"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Middle Row -->
<div class="row middle">
<div class="col-lg-6" >
<div style="background-color: white; height: 100%;"><p>Left</p></div>
</div>
<div class="col-lg-6" >
<div style="background-color: white; height: 100%"><p>Right</p></div>
</div>
</div>
<!-- Bottom row -->
<div class="row bottom">
<div class="col-lg-12">
<div class="marquee"><h2>This is a test</h2></div>
</div>
</div>
<!-- end container -->
</div>
</body>
</html>
这可能是一个原因：
.my-container {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vh; /* Problem here! */
}
将width与height该类中由于某种原因，这与搞乱设置.container-fluid类。并且您width设置为等于视口的高度。
此外，您的body:
width: 100vh;
您已将body的宽度设置为视口的高度。将其更改为vw.