Question

我正在尝试创建一个非常基本的CMS版本，并且我使用的页面提供了html模板，并允许用户创建自己的文本和图像上传内容，以在显示器上显示他们创建的屏幕其他地方。

模板可以工作并存储应有的内容，但是我的问题是：

当我将模板发送到它自己的网页以在另一个屏幕（计算机，电视，电话等）上查看时，整个页面仅显示在屏幕的左半部分，无论什么情况，屏幕的一半都完美显示

为了安全起见，我尝试删除所有外部CSS和脚本，但这没什么区别。唯一的不同是，我从模板页面中删除了将所有内容包装在其页面上的全局导航菜单，但我只希望此页面（使用bootstrap 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>

Answer 1

这可能是原因：

UnityWebRequest

出于某些原因，在此类中设置了.my-container { display: flex; flex-direction: column; height: 100vh; width: 100vh; /* Problem here! */ }和width，这与height类混淆了。 您的.container-fluid设置为等于视口的高度。

另外，您的width中有这个：

body

您已将width: 100vh;的宽度设置为视口的高度。将其更改为body。

Answer 2

我通过更改html，body和.myContainer的样式解决了该问题。这就是我所做的：

html,
body {
  margin: 0 auto;
  height: 100%;
  width: 100%
}

.my-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width:100%;
}

我添加了一个自动补距0以摆脱其他样式（您也可以使用用户规范化），并将值从vh更改为％。瞧！我还摆脱了您的身体startTime（），因为它引发了无效的引用错误。

 html,
    body {
      margin: 0 auto;
      height: 100%;
      width: 100%
    }

    .my-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      width:100%;
    }

    .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;
    }

<!DOCTYPE html>
<html>
<head>
  <title>Template One</title>

 

  <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>

<!-- 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>

全屏引导网页仅占显示的一半

2 个答案: